将React组件拆分为多个文件

Question

I have only been learning React in a week so I am new to it and I am trying to write a simple todo app. 我只在一周内学习了React，所以我是新手，我正在尝试编写一个简单的待办事项应用程序。

Originally I wrote all of the components in one file and loaded that file into the HTML file and it worked great. 最初我在一个文件中编写了所有组件，并将该文件加载到HTML文件中，效果很好。 Now I am refactoring and trying to split the components into different files. 现在我正在重构并尝试将组件拆分为不同的文件。

My full code is on my Github https://github.com/yasgreen93/todolist-react on the extracting-files branch. 我的完整代码在extract extracting-files分支上的我的Github https://github.com/yasgreen93/todolist-react上。

I have split up each component into different files and have an linked them in script tags into my HTML. 我已将每个组件拆分为不同的文件，并将脚本标记中的链接链接到我的HTML中。 This is what my HTML file looks like: 这是我的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>

In the console, I always get the error message Uncaught ReferenceError: TodoListApp is not defined . 在控制台中，我总是收到错误消息Uncaught ReferenceError: TodoListApp is not defined 。 I have tried loading them in different orders with no success. 我试过以不同的顺序加载它们但没有成功。 I have also watched many videos where they do very similar approaches without using webpack and it works for them. 我还观看了许多视频，他们在不使用webpack的情况下做了非常相似的方法，它适用于他们。 I would like to get this working first without using webpack and then move on to learning that. 我想首先使用webpack，然后继续学习。

Can anyone see where I am going wrong? 任何人都可以看到我错在哪里？

Answer 1

You have to add your components to a global window variable in order to use them in html script tag. 您必须将组件添加到全局window变量，以便在html script标记中使用它们。 Like window.TodoListApp =... . 像window.TodoListApp =... var declaration is relative to a file in which you declare it. var声明是相对于您声明它的文件。

But it is considered to be a bad practice to expose parts of you code to a global scope and to transpile JSX in the browser. 但是，将部分代码暴露给全局范围并在浏览器中转换JSX被认为是一种不好的做法。 Instead you should consider to use some building system like Webpack . 相反，你应该考虑使用像Webpack这样的建筑系统。

This way you would be able to use es2015 import syntax to import components from one file to another, bundle everything in one file and much more additional benefits like code minification, sourcemaps, livereload etc. 通过这种方式，您可以使用es2015导入语法将组件从一个文件导入到另一个文件，将所有内容捆绑到一个文件中，以及更多其他好处，如代码缩小，源映射，实时重载等。

Setting up React for ES6 with Webpack and Babel 使用Webpack和Babel为ES6设置React

Using React with Webpack Tutorial 在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