props 简介

3 分钟

React 组件设计为可重用的单元。为了实现重用，组件允许通过属性或 props 将数据传递给它们。

props 是可用于组件的单个实例的只读值。它们可以通过编程方式设置，也可以使用在设置 HTML 元素属性时使用的相同语法进行设置。不同于普通 HTML，props 不局限于字符串或基元值；它们可以是复杂的对象或数组。 props 作为组件内的 this 属性提供。 props 可以包含组件所需的任意数量的属性，并且能够存储对象或任何其他数据类型。

场景

为了使组件可重复使用，通常会传递要显示为 props 的数据。在这里，你将创建一个名为 RecipeTitle 的组件，以显示食谱的标题，它将作为属性传入。

创建组件

在 Visual Studio Code 中打开“初学者”文件夹，如概述中强调的那样。
在 Visual Studio Code 中，打开 src/RecipeTitle.jsx。

在 // TODO: Create RecipeTitle component 行下面添加以下代码：

// TODO: Create RecipeTitle component
function RecipeTitle(props) {
    return (
        <section>
            <h2>{ props.title }</h2>
        </section>
    )
};

export default RecipeTitle;

浏览代码

RecipeTitle 与基本 React 组件类似，其中包含两项重要更新。

首先，它接受名为 props 的参数。这会在使用时自动包含传入组件的所有特性或属性。

其次，你可以像使用任何普通参数那样使用 props 中包含的值。你要查找一个名为 title 的值，它显示在 h2 元素中。

使用组件

现在，让我们更新 App.jsx，以将新 RecipeTitle 组件与 title 属性配合使用。

打开 App.jx
在 TODO: Add import for RecipeTitle 行下方添加以下代码以导入新创建的 RecipeTitle 组件：
```
// TODO: Add import for RecipeTitle
import RecipeTitle from './RecipeTitle'
```

在读取 TODO: Add recipe object 的行下添加以下代码，以便为食谱创建对象：

// TODO: Add recipe object
const recipe = {
    title: 'Mashed potatoes',
    feedback: {
        rating: 4.8,
        reviews: 20
    },
    ingredients: [
        { name: '3 potatoes, cut into 1/2" pieces', prepared: false },
        { name: '4 Tbsp butter', prepared: false },
        { name: '1/8 cup heavy cream', prepared: false },
        { name: 'Salt', prepared: true },
        { name: 'Pepper', prepared: true },
    ],
};

注意

在本模块的练习过程中，你将使用整个 recipe 对象。现在，你的关注是 title。

在读取 TODO: Add RecipeTitle component 的行下方添加以下代码：

{/* TODO: Add RecipeTitle component */}
<RecipeTitle title={ recipe.title } />

浏览代码

首先创建一个对象来表示要显示的食谱，并向其添加 title 属性。然后使用该 RecipeTitle 组件，方法与使用 HTML 元素或任何其他 React 组件相同。主要区别是将 title 属性设置为 recipe.title 值。通过使用 handlebar ({ })，可以动态读取该值。

注意

如果要用于 title 的值是字符串字面量，则可以使用语法 title='Recipe title 来设置属性。

显示页面

保存所有文件。
返回到浏览器并刷新页面。现在，应会看到页面上显示的“土豆泥”标题。

props 简介

场景

创建组件

浏览代码

使用组件

浏览代码

显示页面

反馈