React class 未定义 (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 is not defined"；为什么这不起作用？如果我将所有代码放在一个文件中 (commentBox.js) - 它会起作用。

Answer 1

未声明 CommentBox。如果你想要那样，那么你的代码应该是这样的：

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

ReactDOM.render(<CommentBox />, document.getElementById( 'content' ) );

</script>

Answer 2

您需要在自己的脚本块中声明 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。

React class 未定义 (text/babel)

React class is not defined (text/babel)

reactjs

react-jsx

babeljs