【问题标题】:is there a way to tell react to dynamically create div if not found如果找不到,有没有办法告诉反应动态创建 div
【发布时间】:2016-07-10 00:54:34
【问题描述】:

新的反应,我想知道是否有任何解决方法可以解决这个错误:

_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>

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

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

这给了我:

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

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

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

P.S:我知道dangerouslySetInnerHtml 的方法,但正在寻找更好的方法

【问题讨论】:

    标签: dom reactjs dynamic-html virtual-dom


    【解决方案1】:

    这只是 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'));
    

    【讨论】:

    • 感谢您的回答..太好了!但这不是我要找的(可能是我没有正确表达问题)请查看编辑后的问题
    • 这真的很奇怪,你用 React 创建 dom,然后用 react 从头开始​​创建它的另一部分,并将一个 react 应用程序安装到另一个应用程序上,而不是仅仅构建为同一个应用程序的组件。不管你为什么遇到这种疯狂的情况,我的答案都是一样的。这只是 javascript,您可以使用我提供的相同示例,不明白为什么您不能
    • 实际上它是一个完整的应用程序..它只是 UI 组件...我调用了一个函数 ReactDOM.render(React.createElement(someFunction,{data:someData}),document.getElementById('someID') 这生成了一些带有 div id='someDiv1' 的 html 并在调用我的 someFunction the 下一行之后我'我打电话给React.createElement(someOtherFunction,....,document.getElelmentById(someDiv1) 这说somediv1 没有找到
    • 如果我尝试你的方法,我可以将其应用到 body 或类似但不能应用到 react 创建的虚拟 div 上
    • 为什么要在react 的dive 上追加,只需inside react 就可以了。那个时候 div 可能不存在,因为 react 只是在加载。要测试这个理论,只需使用setTimeout(function(){ /* your 2nd app mount code*/ }, 1000); 进行第二次通话
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2012-07-16
    • 2011-06-25
    • 1970-01-01
    • 2013-03-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多