将React组件拆分为多个文件

Question

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

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

我的完整代码在extract 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导入语法将组件从一个文件导入到另一个文件，将所有内容捆绑到一个文件中，以及更多其他好处，如代码缩小，源映射，实时重载等。

使用Webpack和Babel为ES6设置React

在Webpack教程中使用React

将React组件拆分为多个文件

问题描述

1 个解决方案

解决方案1
2 2016-06-11 11:54:50

将React组件拆分为多个文件

问题描述

1 个解决方案

解决方案1 2 2016-06-11 11:54:50

解决方案1
2 2016-06-11 11:54:50