使用复杂数据类型作为 props

已完成

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

方案

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

创建 CSS

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

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

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

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

更新 RecipeTitle

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

1. 打开 src/RecipeTitle.jsx

2. 在此文件的顶部添加以下代码行：

   import './RecipeTitle.css';
   

3. 在读取 <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 属性。

1. 打开 src/App.jsx。

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

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

查看结果

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