babeljs - React 类未定义(文本/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

您需要在其他两个脚本 block 之上声明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。