渲染React組件與容器中的HTML混合

Question

我有一個運行良好的APP，但必須將其嵌入“文章”中，簡單來說就是：

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

問題是：

1. 會有html標記和組件混合在一起
2. 我的服務器使用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中？

Answer 1

如果要在組件內部呈現html字符串 ，則可以執行此操作。
這應該工作：

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

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