javascript - 将 React 组件拆分为多个文件-6ren

javascript - 将 React 组件拆分为多个文件

转载作者：可可西里更新时间：2023-11-01 13:26:16

26

4

我学习 React 才一周时间，所以我是新手，我正在尝试编写一个简单的待办事项应用。

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

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

我已将每个组件拆分成不同的文件，并在脚本标签中将它们链接到我的 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 的情况下先让它工作，然后继续学习它。

谁能看出我哪里出错了？

最佳答案

您必须将组件添加到全局 window 变量，以便在 html script 标记中使用它们。像 window.TodoListApp =...。 var 声明是相对于您在其中声明它的文件。

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

这样你就可以使用es2015 import syntax将组件从一个文件导入到另一个文件，将所有内容捆绑在一个文件中，以及更多其他好处，如代码缩小、源映射、livereload 等。

Setting up React for ES6 with Webpack and Babel

Using React with Webpack Tutorial

关于javascript - 将 React 组件拆分为多个文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37763006/

26

4

0

文章推荐： php - 如何避免冲突用于依赖注入(inject)的 PHP 特性

文章推荐： c++ - Windows 事件查看器锁定了我的 EXE 文件

java - Arraylist 分为 -
我有一个数组列表: ArrayList allText = new ArrayList(); 其内容是这样的: [Alabama - Montgomery, Alaska - Juneau, Ariz
php - 开始和结束时间，分为 1 小时段
我有一个 timestamp 格式的开始和结束时间。我想将它们分成多个时间段，例如 1 小时。 $t1 = strtotime('2010-05-06 12:00:00'); $t2 = strtot
css - span10 分为 3 列
我需要将 span10 分成 3 列，但我无法将它们排列起来。我应该在 span10 中添加一个 span12 还是使用 offset 还是？？
Pandas - 分为 24 小时区 block ，但不是午夜到午夜
我有一个时间序列。我想从早上 8 点到第二天早上 7:59 分成 24 小时的区 block 。我知道如何按日期分组，但我尝试过使用 TimeGroupers 和 DateOffsets 处理这个 8
java - Android Java 分为 4 个整数
我收到“街道号码邮政编码城市”形式的地址(作为字符串)。我想要做的是将街道和号码与邮政编码和城市分开。通常你可以按空格分割。但有些街道名称中也有空格，例如:“Emile Van Ermengemlaa
java - 将 JList 分为 2 组的优化方法
我有一个用户列表。其中一些用户处于第一状态，而其他用户处于第二状态。所以我想要的是将这个列表显示为首先，它按排序顺序显示存在 = 1 的用户，然后按排序顺序显示存在 = 2 的用户。这里的排序是根据用
javascript - 将 div 分为 3 列
我感觉我搜索了整个网络，但找不到一种方法将不同高度的 div 很好地划分为 3 列，就像 http://www.ing.nl 上那样 headertekst headerteksttesth
css - td 内的 Bootstrap 按钮下拉菜单，分为 2 行
Bootstrap 3 按钮下拉菜单出现问题。你可以在这里看到我的两个例子: http://www.bootply.com/W1dLusilMk http://www.bootply.com/GGBv
javascript - 返回的 php JSON 分为 2 个 Javascript 对象
我在 php 中执行以下操作 foreach($QuestionAsekd as $k => $v){ $grp_name = $v['NAME']; $groupValues[$gr
python - Pandas DataFrame [cell=(label,value)]，分为 2 个独立的数据框
我找到了一种用pandas解析html的绝妙方法。我的数据格式有点奇怪(见下文)。我想将这些数据拆分为 2 个单独的数据帧。注意每个单元格如何由，分隔...是否有任何真正有效的方法来分割所有这些单元
html - CSS
分为 2 列。没有

首页

博学

6Ren·AI

商城

javascript - 将 React 组件拆分为多个文件