Question

我只在一周内学习了React，所以我是新手，我正在尝试编写一个简单的待办事项。

最初我将所有组件都写在一个文件中，然后将该文件加载到HTML文件中，效果很好。现在我正在重构并尝试将组件拆分为不同的文件。

我的完整代码位于extracting-files分支上的我的Github https://github.com/yasgreen93/todolist-react上。

我已将每个组件拆分为不同的文件，并将脚本标记中的链接链接到我的HTML中。这就是我的HTML文件：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Todo List</title>
    <link rel="stylesheet" href="css/styles.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  </head>

  <body>
    <div id="container"></div>
    <script type="text/babel" src="scripts/components/TodoListApp.js"> </script>
    <script type="text/babel" src="scripts/components/CompleteTodo.js"></script>
    <script type="text/babel" src="scripts/components/TodoList.js"></script>
    <script type="text/babel" src="scripts/components/SingleTodo.js"></script>
    <script type="text/babel" src="scripts/components/AddTodo.js"></script>
    <script type="text/babel" src="scripts/components/CompleteTodoButton.js"></script>

    <script type="text/babel">
      ReactDOM.render(
        <TodoListApp url="/api/todos" updateUrl="/api/todos/update" pollInterval={2000}/>,
        document.getElementById('container')
      );
    </script>
  </body>
</html>

在控制台中，我总是收到错误消息Uncaught ReferenceError: TodoListApp is not defined。我试过以不同的顺序加载它们但没有成功。我还观看了许多视频，他们在不使用webpack的情况下做了非常相似的方法，它适用于他们。我想首先使用webpack，然后继续学习。

谁能看到我哪里出错了？

Answer 1

您必须将组件添加到全局window变量，才能在html script标记中使用它们。像window.TodoListApp =...一样。 var声明与您声明它的文件有关。

但是将部分代码暴露给全局范围并在浏览器中转换JSX被认为是一种不好的做法。相反，您应该考虑使用一些建筑系统，如Webpack。

通过这种方式，您可以使用es2015 import syntax将组件从一个文件导入另一个文件，将所有内容捆绑到一个文件中，还可以获得更多其他好处，如代码缩小，源映射，实时重载等。

Setting up React for ES6 with Webpack and Babel

Using React with Webpack Tutorial

将React组件拆分为多个文件

1 个答案: