React: 立即重新渲染 componentDidMount 中的元素错误：无法读取 null 的属性“rootID”。

创建于 2016-05-10 · 3评论 · 资料来源: facebook/react

我在 componentDidMount 函数中执行 ReactDOM.render #container element(top-level)，React 显示一些错误， Cannot read property 'rootID' of null 。
如果我使用 setTimeout 运行 ReactDOM.render，它就可以了。（即使在 0ms 之后）
我感到不确定，有人可以帮助我吗？

html:

<!DOCTYPE html>
<html>
<head>
    <title>React</title>
</head>
<body>
    <div id="container"></div>
    <script type="text/javascript" src="script/lib/react.js"></script>
    <script type="text/javascript" src="script/lib/react-dom.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
    <script type="text/javascript" src="script/bundle.js"></script>
</body>
</html>

A.jsx & B.jsx ：

var A = React.createClass({
    componentDidMount: function(){
        ReactDOM.render(
            <B />,
            document.getElementById('container')
        );
    },
    render: function(){
        return (
            <div>Hello World, I'm A.</div>
        )
    }
});

var B = React.createClass({
    render: function(){
        return (
            <div>Hello World, I'm B.</div>
        )
    }
});

应用程序.jsx：

ReactDOM.render(
    <A />,
    document.getElementById('container')
);

资料来源

h1orz

最有用的评论

真正的问题是你为什么要在生命周期方法中调用ReactDOM.render ？您正在尝试在当前组件所在的节点上安装一个新组件，这似乎是一种反模式。

您应该使用根父组件来管理渲染哪些组件，而不是尝试在根处重新挂载。如果你绝对必须有多个 React 根（你应该有一个很好的理由），你应该使用某种辅助系统来管理这个：

https://facebook.github.io/react/blog/2015/10/01/react-render-and-top-level-api.html#helpers

如果您有多个 React 根，或者随着时间的推移而被删除的单个根，我们建议您始终创建自己的包装器 API。根据您的外部系统的外观，这些看起来都会略有不同。例如，在 Facebook，我们有一个系统可以自动绑定到我们的页面转换路由器以自动调用 unmountComponentAtNode。

与其在任何地方直接调用 ReactDOM.render() ，不如考虑编写/使用一个库来管理应用程序中的挂载和卸载。

aweary 于 2016-06-01

👍2 🎉1

所有3条评论

您可以在 jsfiddle 中重现您的问题吗？ https://jsfiddle.net/L3zn8dws/

cpb 于 2016-06-01

真正的问题是你为什么要在生命周期方法中调用ReactDOM.render ？您正在尝试在当前组件所在的节点上安装一个新组件，这似乎是一种反模式。

https://facebook.github.io/react/blog/2015/10/01/react-render-and-top-level-api.html#helpers

如果您有多个 React 根，或者随着时间的推移而被删除的单个根，我们建议您始终创建自己的包装器 API。根据您的外部系统的外观，这些看起来都会略有不同。例如，在 Facebook，我们有一个系统可以自动绑定到我们的页面转换路由器以自动调用 unmountComponentAtNode。

与其在任何地方直接调用 ReactDOM.render() ，不如考虑编写/使用一个库来管理应用程序中的挂载和卸载。

aweary 于 2016-06-01

👍2 🎉1

这似乎是一种不受支持的模式：您试图将某些内容渲染到一个容器中，该容器已经包含另一个组件，其生命周期当前正在执行。

如果您希望B出现，请在A的渲染输出中包含<B /> 。

gaearon 于 2016-10-27

👍2

此页面是否有帮助？

0 / 5 - 0 等级

React: 立即重新渲染 componentDidMount 中的元素错误：无法读取 null 的属性“rootID”。

最有用的评论

所有3条评论

相关问题