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）中 - 它会起作用。

- Andrey

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>

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

- mitchfuku

---

这对我有用。请确保使用<script>，而不是<script type="text/babel">。 - John Wiseman

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>

- vistajess

---

在这段代码中，你能说一下ReactDom对象的情况吗？它没有被声明吗？ - Andrey

ReactDom是用于将组件渲染到DOM的库，应该被导入到代码中，但是像CommentBox这样的组件本身也没有被定义。 - vistajess

这是错误的答案)) CommentBox我在调用ReactDOM.render之前添加了它。它必须存在于window对象的全局范围内。 - Andrey

我也遇到了这个问题，只有在定义与使用在同一脚本标签中时才能使其正常工作。 - jub