logo标签列表

将React组件拆分为多个文件

javascripthtmlreactjs
3
我只学了一周的React，所以对它还比较陌生，现在我想写一个简单的待办事项应用程序。最初，我把所有组件都写在一个文件中，并将该文件加载到HTML文件中，效果非常好。现在我正在重构代码，试图将组件拆分成不同的文件。
我的全部代码可以在我的Github上找到，链接为：https://github.com/yasgreen93/todolist-react，位于“extracting-files”分支中。
我已经将每个组件拆分成不同的文件，并在HTML中使用script标签进行了链接。下面是我的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未定义。 我已经尝试以不同的顺序加载它们，但没有成功。我还观看了许多使用类似方法而不使用webpack的视频，并且在他们那里可以正常运行。我希望首先在不使用webpack的情况下使其正常工作，然后再开始学习。 有人能看出我错在哪里吗？
1个回答
2
为了在html的
感谢您的建议。我没有使用ES6，而您提供的资源都是使用它的。它对ES5仍然适用吗？ - yasgreen
是的。只需不使用Babel加载器，而使用常规的Node CommonJS模块 - https://webpack.github.io/docs/commonjs.html - Dmitriy Nevzorov
我同意作者的观点。为了降低学习难度，必须能够在没有webpack的情况下完成这个操作。 - Wilko van der Veen
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接