使用複雜資料類型作為.props

已完成

props 元件不限於字串，但可以使用 JavaScript 物件。 建議您使用此功能，來建立更健全的元件。

案例

建議更新 RecipeTitle 以顯示配方的回饋內容。 如果平均評分等於或低於 3.5，建議以紅色顯示評分。 如果高於 3.5，建議以綠色顯示評分。 使用三元運算子和 CSS 類別，以協助管理顯示。

建立 CSS

藉由將 CSS 匯入個別元件中，可以避免命名衝突，以及 CSS 通常會發生的其他問題。 首先，為 RecipeTitle 建立 .css 檔案。

1. 將新檔案新增至名為 RecipeTitle 的 src 資料夾

2. 將下列 CSS 新增至 src/RecipeTitle css：

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

更新 RecipeTitle

現在，更新 RecipeTitle 以匯入 CSS 並顯示值。

1. Open 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 } />
   

查看結果

儲存所有檔案。 瀏覽器應該會自動以更新的顯示重新整理。