下一步

使用复杂数据类型作为 props

3 分钟

组件 props 不局限于字符串，但可以使用 JavaScript 对象。可以使用它来创建更强大的组件。

方案

你希望更新 RecipeTitle 以显示食谱的反馈。如果平均评分为 3.5 或更低，则需要将评级显示为红色。如果高于 3.5，则需要将评级显示为绿色。使用三元运算符和 CSS 类来帮助管理显示。

创建 CSS

通过将 CSS 导入单个组件，可以避免命名冲突和 CSS 经常出现的其他问题。在这里，首先为 RecipeTitle 创建 .css 文件。

将新文件添加到名为 RecipeTitle.css 的 src 文件夹

将以下 CSS 添加到 src/RecipeTitle.css：

.red {
    color: red;
}
.green {
    color: green;
}

更新 RecipeTitle

现在，更新 RecipeTitle 以导入 CSS 并显示值。

打开 src/RecipeTitle.jsx
在此文件的顶部添加以下代码行：
```
import './RecipeTitle.css';
```

在读取 <h2>{ props.title }</h2> 的行下方添加以下代码：

<h3 className={ props.feedback.rating <= 3.5 ? 'red' : 'green' }>
    { props.feedback.rating } from { props.feedback.reviews } reviews
</h3>

浏览代码

首先导入你创建的 CSS 文件。添加新 h3 元素以显示 feedback。使用三元运算符来设置基于 rating 的类。

ReactTitle.jsx 的全部内容现在应为：

import './RecipeTitle.css';
import React from 'react';

// TODO: Create RecipeTitle component
function RecipeTitle(props) {
    return (
        <section>
            <h2>{ props.title }</h2>
            <h3 className={ props.feedback.rating <= 3.5 ? 'red' : 'green' }>
                { props.feedback.rating } from { props.feedback.reviews } reviews
            </h3>
        </section>
    )
};

export default RecipeTitle;

更新应用程序组件以通过评级

更新 RecipeTitle 以设置 feedback 属性。

打开 src/App.jsx。

修改现有 RecipeTitle 元素以添加 feedback 属性：

<RecipeTitle title={ recipe.title } feedback={ recipe.feedback } />

查看结果

保存所有文件。浏览器应在显示更新后自动刷新。

Screenshot of the recipe display.

继续