将React组件分割成多个文件 [英] Splitting up React components into multiple files
问题描述
我只在一周内学习过React，因此我对它很陌生，并且正在尝试编写一个简单的待办事项应用程序。 原本我写了所有的组件放在一个文件中，并将该文件加载到HTML文件中，并且效果很好。现在我正在重构并试图将组件分割成不同的文件。
我的完整代码位于我的Github上 https://github.com/yasgreen93/todolist-react extract-files 分支 p>
我将每个组件分成不同的文件，并将它们以脚本标记链接到我的HTML中。这是我的HTML文件的样子：
<！DOCTYPE html>
< html>
< head>
< meta charset =utf-8>
< title>待办事项清单< / title>
< link rel =stylesheethref =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 / babelsrc =scripts / components / TodoListApp.js> < /脚本>
< script type =text / babelsrc =scripts / components / CompleteTodo.js>< / script>
< script type =text / babelsrc =scripts / components / TodoList.js>< / script>
< script type =text / babelsrc =scripts / components / SingleTodo.js>< / script>
< script type =text / babelsrc =scripts / components / AddTodo.js>< / script>
< script type =text / babelsrc =scripts / components / CompleteTodoButton.js>< / script>
< script type =text / babel>
ReactDOM.render（
document.getElementById 'container'）
）;
< / script>
< / body>
< / html>
在控制台中，我总是收到错误消息 Uncaught ReferenceError：TodoListApp is未定义。我试图以不同的顺序加载它们，但没有成功。我也观看了许多视频，他们在没有使用webpack的情况下采用非常类似的方法，并且适用于他们。我想首先得到这个工作，而不使用webpack，然后继续学习。
任何人都可以看到我要出错的地方吗？
$ b $你必须将你的组件添加到一个全局的窗口变量中，以便在html中使用它们。 脚本标记。像 window.TodoListApp = ... 。 var 声明与您声明的文件有关。 将部分代码展示给全局范围并在浏览器中传输JSX。相反，您应该考虑使用一些建筑系统，如 Webpack 。 通过这种方式，您可以使用 es2015导入语法将组件从一个文件导入到另一个文件，将所有文件都捆绑到一个文件中，还有更多的好处，比如代码缩小，源代码映射，livereload等。
$ b
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.
Originally I wrote all of the components in one file and loaded that file into the HTML file and it worked great. 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.
I have split up each component into different files and have an linked them in script tags into my HTML. This is what my HTML file looks like:
<!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. 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. I would like to get this working first without using webpack and then move on to learning that.
Can anyone see where I am going wrong?
You have to add your components to a global window variable in order to use them in html script tag. Like window.TodoListApp =.... var declaration is relative to a file in which you declare it.
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. Instead you should consider to use some building system like 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.
Setting up React for ES6 with Webpack and Babel
Using React with Webpack Tutorial
这篇关于将React组件分割成多个文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
