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

标签 reactjs

我对 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 。但是,当我在定义 Box 类后将 index.html 中的 ReactDOM.render 行移动到 scripts/box.js 中时,一切正常。

为什么我无法在 scripts/box.js 之外执行 ReactDOM.render ?如何正确包含/需要一个 React 组件,以便其他 JavaScript 文件可以使用它?

最佳答案

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

关于reactjs - React 未捕获引用错误 - 对象/类未定义,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36145955/

相关文章:

javascript - 在 Typescript 中使用 Array.from 收到的函数未定义错误

javascript - 如何强制渲染功能性 React 组件?

reactjs - 使用 styled-jsx 而不弹出 create-react-app

javascript - 在 react.js 中的 anchor 标记中添加参数

javascript - 为什么在使用 redux 和 react.js 时我的 Prop 是 `undefined`?

javascript - 从 Fetch 返回 HTML 有什么危险

javascript - 从 Puppeteer 中的单个选择器获取多个属性

javascript - react 函数和事件

javascript - Create React App 中 Eject 做了什么?

javascript - React 设置状态不会在获取成功函数中更新(在按键事件中)