定义第一个组件

在缺乏经验的情况下，定义一个组件会比较棘手，不过这些提示可以帮助你：

如果它在程序里看起来是个明显的“块”，那它可能是个组件。

如果它在程序里经常会被复用，那它可能是个组件。

第二条很有价值：使用通用的 UI 元素作为组件，可以让你只更改一处，就能更改所有使用该组件的地方。现在你也不必马上把所有东西都拆成组件。让我们从第二点开始做起，将 UI 中重用最多、最重要的部分抽取为一个组件：一个待办事件项。

编写

在制作组件之前，我们应该为它新建一个文件。实际上我们应该为它新建一个文件夹。下面的命令可以新建一个 component 文件夹，在这之中又新建了一个叫做 Todo.js 的文件。在你运行这些命令之前，请确保你在 App 的根目录下。

bashmkdir src/components

touch src/components/Todo.js

新的 Todo.js 文件是空的。打开它，并添加第一行。

jsimport React from "react";

既然我们要做一个叫做 Todo 的组件，就要在 Todo.js 中加入相关代码。如下所示，这段代码中，我们使用了一行代码定义了函数并导出了它。

jsexport default function Todo() {

return (

// …

);

}

目前为止很顺利，但我们的组件必须返回一些东西！回到 src/App.js，从无序列表中复制第一个

);

}

备注：组件必须返回一些东西。如果你试图渲染一个不返回任何东西的组件，React 会在浏览器中提示出现错误。

到现在为止，我们的 Todo 组件已经完成，我们可以使用它了。在 App.js 中，在文件顶部添加以下代码，导入 Todo 组件：

jsimport Todo from "./components/Todo";

导入组件之后，你可以调用 组件来替换 App.js 中的所有

);

}

现在你的浏览器应该显示三个不同的任务。但另一个问题仍然存在：它们都是被默认勾选的。

是否 completed？

在原来的静态列表中，只有 Eat 被选中。我们想重新利用构成 组件的大部分 UI，但只修改一处。这个工作很适合另一个 prop! 在 App.js 中给每个 传递一个新的 props completed。第一个（Eat）的值应该是 true；剩下的应该是 false。

js

在这之前，我们必须确保 Todo.js 已经使用了这些 props。修改 上的 defaultChecked 属性，使其等于 completed prop。

js

你的浏览器应该会更新，现在只有 Eat 被选中了。

如果你修改每个 组件的 completed prop，你的浏览器会根据选中或不选中去相应的渲染复选框。

请给我一些 id

我们的 组件给每个任务的 id 属性都设为 todo-0 了。这是个不好的 HTML 写法，因为 id 属性必须是不同的（它们被 CSS、JavaScript 等用作文档片段的唯一标识符）。这意味着我们需要给每一个 Todo 组件一个不同 id prop。

为了遵循最初的规则，让我们给每个 组件实例一个 todo-i 格式的 ID，其中数字 i 每次增加一。

js

现在回到 Todo.js 来使用 id prop。需要替换 元素的 id 属性，以及 label 的 htmlFor 属性。

js

到目前为止，还算不错？

目前为止，我们使用 React 很顺利，不过可以做的更好！我们的代码有些重复。渲染我们的 组件的三行文字几乎是相同的，只有一点不同：每个 prop 的值。

我们使用一个 Javascript 的核心能力来整理我们的代码：迭代。想使用迭代，我们首先应该重新思考我们的任务。

任务作为数据

现在每个任务都包含三份信息：它的名称、是否被选中，及它唯一的 ID。这些数据可以很好地转化为一个对象。因为我们有多个任务，所以用一个对象数组可以很好地表示这些数据。

在 src/index.js 中，在最后一条导入下面，在 ReactDOM.render() 上面，新建一个 const 数据。

jsconst DATA = [

{ id: "todo-0", name: "Eat", completed: true },

{ id: "todo-1", name: "Sleep", completed: false },

{ id: "todo-2", name: "Repeat", completed: false },

];

然后，我们将 DATA 作为一个 prop 传入 ，叫做 tasks。src/index.js 的最后一行看起来应该像这样：

jsReactDOM.render(, document.getElementById("root"));

这个数组现在可以在 App 组件中以 props.tasks 使用。你可以使用 console.log() 去检查它。

备注：ALL_CAPS 这个常量名称在 JavaScript 中没有特殊意义；它们是一种惯例，告诉其他开发者“这个数据在这里定义后将永远不会改变”。

使用迭代进行渲染

为了渲染我们的对象数组，我们会把其中的每个对象变成一个 组件。JavaScript 给了我们一个数组方法，用于将数据转换为其他东西：Array.prototype.map()。

在 return 语句的上方，新建一个叫 taskList 的 const，然后使用 map() 去转换它。我们先把 tasks 数组变成简单的东西：每个任务的 name：

jsconst taskList = props.tasks?.map((task) => task.name);

我们尝试使用 taskList 替换所有

的 children：

js

role="list"

className="todo-list stack-large stack-exception"

aria-labelledby="list-heading">

{taskList}

这让我们能够再次显示所有的组件，但我们还有更多的工作要做：目前浏览器将每个任务的名称显示为非结构化文本。我们忘记了 HTML 结构——