没有定义React类(text/babel)

Question

我有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) - 它将工作.

Answer 1

您需要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>

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