React学习手册

React

进阶

｜

75

组件类即类型

当渲染一个

HTML

或者

SVG

元素时，我们使用的是字符串。当创建组件的元素

时，我们使用的是组件类。这也是

IngredientsList

没有使用引号括起来的原

因，我们可以将该类传递给

createElement

，因为它就是一个组件。

React

会创

建一个该类的实例，并为用户管理它。

使用组件

IngredientsList

和这些数据将会把下列无序列表渲染到

DOM

上：

<ul data-react-root class="ingredients">

<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>

React.Component

如第

2

章所述，

React.Component

是一个主要特性，并且兼容

ES6

规范，它是一个抽象

类，用户可以通过它来构建新的

React

组件。还可以使用

ES6

规范中的语法创建支持继

承的自定义组件类，可以使用相同的语法创建

IngredientsList

（参见示例

4-14

）。

示例

4-14

：使用

ES6

规范中的

class

创建

IngredientsList

class IngredientsList extends React.Component {

renderListItem(ingredient, ...