logo标签列表

React未捕获的引用错误 - 对象/类未定义

reactjs
3

我是完全新手，对React一无所知。我尝试创建一个index.html文件，并包含以下内容：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React Tutorial</title>
    <!-- Not present in the tutorial. Just for basic styling. -->
    <link rel="stylesheet" href="css/base.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js"></script>
  </head>
  <body id="html-body">
    <div id="content"></div>
    <script type="text/babel" src="scripts/box.js"></script>
    <script type="text/babel">
    ReactDOM.render(
      <Box />,
      document.getElementById('content')
    );
    </script>
  </body>
</html>

在 scripts/box.js 中，我有以下代码：

var Box = React.createClass({
  render: function() {
    return (
        <h2>Purple Monkey</h2>
    );
  }
});

当我在浏览器中查看index.html时，出现错误Uncaught ReferenceError: Box is not defined。 但是，当我将ReactDOM.render行移动到scripts / box.js中，在定义Box类之后立即执行，一切正常。
为什么无法在scripts/box.js之外执行ReactDOM.render？ 如何正确地包含/要求React组件，以便其他JavaScript文件可以使用它？
1
@John，我不知道<script type="text/babel">标签在幕后是如何编译的，它们可能有自己的作用域。作为一个实验，执行window.Box = React.createClass是否可行？ - azium
@azium 哦，那很有趣...如果我将 var Box = 替换为 window.Box =，那么一切都可以正常工作。为什么会这样呢？ - John
因为 Babel 会将你的代码重写为闭包封装模块，这也是为什么你通常不会在客户端使用 Babel 的原因，你需要将应用程序编译成一个捆绑包，然后让客户端加载它。 - Mike 'Pomax' Kamermans
看起来脚本类型 text/babel 会创建自己的作用域，就像函数一样，其中 vars 只在函数的闭包内可用。这种编写 React 的方式并不适用于生产环境，只是为了熟悉事物。现在只需将东西放在同一个脚本标记中，一旦感到舒适，就可以拉下一个样板并从那里开始编码，就像这个 https://github.com/gaearon/react-hot-boilerplate - azium
1个回答
1

我将var Box =替换为window.Box =，然后一切正常。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接