React - ReactDOM.render到一个后来加载的div

Question

我试图在我的angularjs应用程序中使用React。

使用类似的东西：

 ReactDOM.render(
  <Component prop={prop} />,
  document.getElementById("react-root")
);

如果将"react-root" div直接添加到index.html中的DOM，它可以正常工作，

但如果div加载到ng-include模板中，React错误说“目标容器不是有效的DOM元素”

我明白这可能是由于当div运行时ReactDOM.render不在DOM中，因为后来加载了ng-inlcude模板/异步。

我也明白这不是React问题。

我想我只需要在DOM中提供ReactDOM.render之后找到一种方法来调用div。

Answer 1

你可以用MutationObserver做到这一点

var observer = new MutationObserver(() => {
    let reactRoot = document.getElementById("react-root");

    if(reactRoot){
        ReactDOM.render(
            <Component prop={prop}/>,
        );

        observer.disconnect();
    }
});

observer.observe(document.body, {childList: true});