如何获取ReactDOM挂载元素的innerHTML

Question

HTML标记如下：

<div id="my-component">
    <div>Some content goes here</div>
</div>

在app.js文件中包含此内容：

ReactDOM.render(<MyComponent/>, document.getElementById('my-component));

我想在安装反应组件之前获得#my-component的innetHTML。

在ReactDOM.findDOMNode中使用componentWillMount无效，因为该元素尚未装入，因此返回null并且componentDidMount innerHTML已被替换。

Answer 1

为了达到这个目的，我做了以下事情：

const el = document.getElementById('my-component');
ReactDOM.render(
  <App>{el.innerHTML}</App>,
  el
);

然后在我的react组件中，我可以像这样渲染html：

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