将React组件添加/注入到来自后端的纯HTML中

Question

我有一个来自后端的纯HTML。 我想在HTML中包含/注入/添加React组件到具有特殊id div中并正确呈现它。 我想我应该用dangerouslySetInnerHTML （或html反应解析器）和ReactDOM.render ，但ReactDOM.render没有一个阵营组件内工作。 有没有办法做到这一点。 我的建议似乎根本不对：

export default class MainBoard extends Component {
    constructor(props) {
    super(props);
    this.state = {content: { __html: "" }};
    };
    componentWillMount() {
    const dinamicHTML = { __html: "<div class='dinamic-content'><h4 class='content-header'>Dinamic content header</h4><div id='test-component'>This content is dynamically added.</div></div>" };
        this.setState({ content: dinamicHTML});
        ReactDOM.render(<Menu />, document.getElementById('test-component'));
    }
    render() {
        return (
            <div className="main-content-wrapper">
                <h3>MainBoard</h3>
                <div className="dinamic-content-wrapper" dangerouslySetInnerHTML={this.state.content} />
            </div>
        );
    }
}

Answer 1

至于尝试在componentWillMount内部呈现Menu，您几乎可以肯定要重组您的组件层次结构。 例如：

<Container>
  <Menu />
  <MainBoard />
</Container>

您实际上应该只调用一次ReactDOM.render 。

---

现在到主要问题，没有办法代替从服务器接收JSON吗？ 如果没有，我认为您在使用dangerouslySetInnerHTML会陷入困境。 您最好在componentDidMount而不是componentWillMount内部执行此操作。 例如：

componentDidMount() {
  requestHTML().then(html => this.setState({ content: { __html: html } }))
}

requestHTML的实现取决于您。

Answer 2

确实，唯一地使用dangerouslySetInnerHTML的SetInnerHTML做到这一点。

现在，正如您提到的那样，这不是一个特别好的方法，具体取决于此HTML的来源。 如果用户可以通过任何方式在其中插入内容，那么您很快就会遇到跨站点脚本的情况。

但是，如果您信任HTML，则可以使用您正在做的事情。

Answer 3

是的，这是可行的。 您可以使用ReactDOM.render在HTML元素中注入一个React组件。

但是我会重新考虑其他方法。 为什么不返回JSON而不是HTML？ 否则，您将得到此奇怪的代码。

const Menu = props => <div>menu</div>;

class App extends React.Component {
  render() {
    return (
      <div className="main-content-wrapper">
        <h3>MainBoard</h3>
        <div ref={el => (this.dynamicContentWrapper = el)} 
          className="dynamic-content-wrapper" />
      </div>
    );
  }

  componentDidMount(){
    const htmlFromAjax = `
      <div class='dynamic-content'>
        <h4 class='content-header'>Dynamic content header</h4>
        <div id='test-component'>This content is dynamically added.</div>
      </div>`;
    this.dynamicContentWrapper.innerHTML = htmlFromAjax;
    ReactDOM.render(<Menu />, this.dynamicContentWrapper.querySelector('#test-component'));
  }
}