英文:
How to convert React drag and drop page builder state to working html/css/js page
问题
最近，我正在努力构建一个基于React的应用框架的拖放UI构建器。在实现拖放功能之前，我正在尝试根据存储在我的状态中的结构化数组来呈现页面布局。
我的问题是，如何呈现具有OnClick、OnChange等事件的实际组件。由于我正在使用"ReactDOMServer.renderToStaticMarkup"将组件转换为HTML/CSS，事件没有触发。有人可以提供我一个解决方案吗？我在这里添加了一个示例代码。我的计划是使用Next.js和SSR来呈现页面。由于将组件转换为HTML/CSS后，我的事件触发不起作用，我被卡住了。如果有人可以提供示例，我将不胜感激。
示例 - https://codesandbox.io/s/zeus-research-b61lwo?file=/src/Component.js:356-391
英文:
Recently, I am working to build a drag and drop UI builder for react based app frameworks. Before implementing drag and drop functionality, I am trying to render a page layout according to structured array stored in my state.
My question is, How can I render actual components with events such as OnClick, OnChange. Since I'm using "ReactDOMServer.renderToStaticMarkup" to convert the component to html/css, events are not triggering. Can someone provide me a way forward from here. I have added a sample code here. My plan is to use next js and SSR to render the page. Since converting the component to html/css, my event triggers are not triggering, I'm stuck here. I would love to see an example if someone can provide.
Sample - https://codesandbox.io/s/zeus-research-b61lwo?file=/src/Component.js:356-391
答案1
得分: 0
我正在回答自己的问题，如果有人想按照我的方式进行操作。我犯了一个错误，将React组件转换为HTML/CSS，并使用dangerouslySetInnerHTML来渲染它。与其这样做，我将直接渲染React组件本身。到目前为止，它运行正常。如果出现任何问题，我会更新答案。
英文:
I'm answering my own question if someone thinking of following the same way of mine. I made a mistake by converting the react component to html/css and use dangerouslySetInnerHTML to render it. Instead of that, I'm going to render react component it self. So far, It is working. Ill update the answer if I get any issues.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论