React学习手册

68

｜

第

4

章

子节点

ReactDOM

允许用户将一个独立的元素渲染到

DOM

上。

注

6

React

会使用

data-

reactroot

对它进行标记。所有其他的

React

元素都可以通过嵌套的方式合成到上述独

立元素中。

React

是采用

props.children

渲染子元素的。在上一节中，我们已经将一个文本元

素作为

h1

标签的子元素进行渲染了，并且

props.children

的值被设置为了“

Baked

Salmon

”。我们还可以将其他

React

元素渲染为子元素，继而创建一个元素树。这也

是我们使用组件树这个术语的原因。这棵树包含一个根组件，同时衍生出很多分支。

接下来看看包含若干食材成分的无序列表，如示例

4-4

所示。

示例

4-4

：食材成分列表

<ul>

<li>1 lb Salmon</li>

<li>1 cup Pine Nuts</li>

<li>2 cups Butter Lettuce</li>

<li>1 Yellow Squash</li>

<li>1/2 cup Olive Oil</li>

<li>3 cloves of Garlic</li>

</ul>

在这个示例中，无序列表是根元素，它包含

6

个子节点。我们可以使用

React.

createElement

来表示这个

ul

和它的子节点（参见示例

4-5

）。

示例

4-5

：

React

元素表示的无序列表

React.createElement(

"ul",

null,

React.createElement("li", ...