React学习手册

84

｜

第

5

章

示例

5-1

：

JSX

构造的一个无序列表

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

JSX

还可以和组件一起使用。只需使用类名定义组件即可。在图

5-1

中，我们使用

JSX

将数组

ingredients

传递给了

IngredientsList

的属性。

图

5

-

1

：使用JXS创建IngredientsList

当我们将数组

ingredients

传给这个组件时，需要使用花括号将它括起来。它也被称为

JavaScript

表达式，在我们将

JavaScript

的值传给组件参数时，必须采用这种形式。组

件可以接受两种类型：一个字符串或者一个

JavaScript

表达式。

JavaScript

表达式可以

包含数组、对象，甚至函数。为了引用它们，用户必须使用花括号将它们括起来。

JSX

小技巧

JSX

语法看上去并不陌生，大部分语法规则和

HTML

类似。不过，在使用

JSX

时，有一

些注意事项是读者应该知道的。

组件嵌套

JSX

允许用户将组件作为其他组件的子元素添加。比如，在

IngredientsList

内部，我

们可以渲染名为

Ingredient

的其他组件多次（参见示例

5-2

）。

示例

5-2

：

IngredientsList ...