javascript - 目标容器不是 ReactJS 中的 DOM 元素

Question

我刚开始学习 ReactJS 并成功编写了我的第一个代码。当相同的模式出现在组件上时，我在控制台中收到一个错误提示 _Invariant Violation: registerComponent(...): Target container is not a DOM element. .我使用的是 react 和 babel cdn，而不是下载和导入。

<div id="=f_compo"></div>
<script type="text/babel">
    var compo= React.createClass({
        render: function(){
            return (<h3>This is a simple component</h3>);
        }
    });
    ReactDOM.render(<compo/> ,document.getElementById('f_compo'));
</script>

这是我的 index.html 代码(由于发布问题时出现错误，我删除了 head 标签中的 cdn 链接)，以下内容 是错误我正在接收。

错误:

_不变 _register组件 _renderNewRootComponent wrapper renderSubtreeIntoContainer 使成为 wrapper 我 r o 你 F

由于谷歌上的解决方案很少，我需要一个明确的解释，提及为什么会出现这种错误？和如何以正式的方式解决它？

Answer 1

错别字

// You declared id as "=f_compo"
<div id="=f_compo"></div>
<script type="text/babel">
    var compo= React.createClass({
        render: function(){
            return (<h3>This is a simple component</h3>);
        }
    });
    //Find the same ID here. Right now it's "=f_compo" not "f_compo"
    ReactDOM.render(<compo/> ,document.getElementById('f_compo'));
</script>