React学习手册

React

进阶

｜

71

上述代码为数组中的每种成分创建了一个

React

元素。每个字符串将会作为列表元素

子节点中的文本予以显示。每种成分的值将会作为列表项显示。

当运行这些代码时，你将会在控制台发现一个错误提示，如图

4-2

所示。

图

4

-

2

：控制台错误提示

当我们通过遍历数组构造了一个子元素列表时，

React

希望其中的每个元素都包含一

个

key

属性。

key

属性主要是用来辅助

React

高效地更新

DOM

的。我们将会在第

5

章深入

讨论

key

，以及必须这么做的原因，不过现在可以通过为每个列表项元素添加一个唯

一

key

属性，来避免系统出现这个警告信息（参见示例

4-11

）。我们可以使用数组的

索引作为每种成分的

key

属性的唯一值。

示例

4-11

：添加一个

key

属性

React.createElement("ul", {className: "ingredients"},

items.map((ingredient, i) =>

React.createElement("li", { key: i }, ingredient)

)

React

组件

每个用户界面都是由若干零部件构成的。这里用到的菜谱示例中包含若干菜谱，每个

菜谱又由若干零部件构成（见图

4-3

）。

图

4

-

3

：菜谱应用