reactjs – 没有定义React类(text/babel)

发布时间：2020-12-15 05:07:48 所属栏目：百科来源：网络整理

导读：我有commentBox.jsx文件,包含以下代码： var CommentBox = React.createClass( { render: function () { return ( div className="commentBox" h1Comments/h1 /div ); }}); 在index.html中,我想渲染此组件： div id="content"/divscript type="text/babel" s

我有commentBox.jsx文件,包含以下代码：

var CommentBox = React.createClass( {
  render: function () {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
      </div>
    );
  }
});

在index.html中,我想渲染此组件：

<div id="content"></div>
<script type="text/babel" src="scripts/commentBox.jsx"></script>

<script type="text/babel">
    ReactDOM.render(<CommentBox />,document.getElementById( 'content' ) );
</script>

但我收到错误：“CommentBox未定义”;为什么这不起作用？
如果我将所有代码放在一个文件(commentBox.js) – 它将工作.

你需要声明var CommentBox;在其自己的脚本块中高于其他两个.您的脚本导入之间不共享变量的范围.

<div id="content"></div>
<script>
  var CommentBox;
</script>
<script type="text/babel" src="scripts/commentBox.jsx"></script>
<script type="text/babel">
  ReactDOM.render(<CommentBox />,document.getElementById( 'content' ) );
</script>

您还可以从jsx文件中删除var.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!