从容器中渲染与 HTML 混合的 React 组件答案

【问题标题】：Render React components mixed with HTML from a container从容器中渲染与 HTML 混合的 React 组件
【发布时间】：2016-11-23 09:45:51
【问题描述】：

我有一个运行良好的 APP，但它必须嵌入到“文章”中，所以简单地说：

<h1>...</h1>
<p>...</p>
<MyComponent key={1} data={data[0]} />
<p>...</p>
<MyComponent key={2} data={data[1]} />

问题是：

会有html标签和组件混在一起
我的服务器使用 PHP，应用程序必须嵌入到 php 文件中

我尝试将数据从渲染内容发送到渲染函数（我知道必须进行一些处理才能使其成为组件，我尝试过： - https://github.com/roman01la/html-to-react-components - https://www.npmjs.com/package/html-to-react

componentWillMount() {
        this.content = document.getElementById('root').innerHTML
    },
    render() {
    return (
          <div>
            {this.content}
          </div>
        )
    }

有没有一种方法可以将 html 标签（一篇文章）与其中的组件混合并解析它们以将组件安装在该 html 中？

【问题讨论】：

标签： javascript php reactjs

【解决方案1】：

如果您想在组件中呈现 html 字符串，您可以这样做。
这应该工作：

render() {
   return (
     <div dangerouslySetInnerHTML={{__html: this.content}} />
   )
}

https://facebook.github.io/react/docs/dom-elements.html#dangerouslysetinnerhtml

【讨论】：