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。

Answer 2

未声明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>

没有定义React类（text / babel）

2 个答案: