如果没有找到,有没有办法告诉反应动态创建 div

Nis*_*tha 1 dom dynamic-html reactjs virtual-dom

刚开始反应,我想知道是否有任何解决方法可以克服此错误:

_registerComponent(...): Target container is not a DOM element.

编辑我想做的是:

我有一个反应功能,如:

ReactDOM.render(React.createElement(someFunction,{data:someData}),document.getElementById('someID')

这会产生一个dom喜欢:

<span>
    <ul data-reactid='...'>blahhh</ul>
    <div data-reactid='...'>
        <div id='some-id1' data-reactid='...'>blahhh</div>
        <div id='some-id2'data-reactid='...'>blahhhh</div>
    </div>
</span>
Run Code Online (Sandbox Code Playgroud)

现在在上一个 react 调用的下一行,我有其他函数试图用上面创建的 div 做一些事情:

ReactDOM.render(React.createElement(someOtherReactFunction, { somePram: 'ImParam'}), document.getElementById('some-id1'));
Run Code Online (Sandbox Code Playgroud)

这给了我:

_registerComponent(...): Target container is not a DOM element.

但我可以看到它存在于 DOM 中

那么如何访问这个虚拟 domdiv呢?并在其中加载一些内容?

PS:我知道一种方法,dangerouslySetInnerHtml但正在寻找一种更好的方法

Luk*_*kas 5

这只是javascript。是的,您可以创建 div。您只需在某个 dom 元素上注册一次即可加载所有应用程序。你应该避免在 React 应用程序加载后触摸 DOM,因为 React 以非常有效的方式做到这一点,但这并不意味着不可能触摸它。在加载 React 应用程序之前,如果您必须检查应用程序容器是否存在,您可以使用以下代码来完成:

if (!document.getElementById("app")) {    
    var div = document.createElement("div");
    div.id = 'app';
    document.body.appendChild(div);
}

ReactDOM.render(<App />, document.getElementById('app'));
Run Code Online (Sandbox Code Playgroud)