複合データ型を props として使用する

  • 3 分

コンポーネント props は文字列に限定されず、JavaScript オブジェクトも使用できます。 これを使用して、より堅牢なコンポーネントを作成できます。

シナリオ

あなたは、レシピのフィードバックを表示するために RecipeTitle を更新したいと考えています。 平均評価が 3.5 以下の場合は、評価を赤色で表示します。 3.5 を超える場合は、評価を緑色で表示します。 表示を管理するために三項演算子と CSS クラスを使用します。

CSS を作成する

CSS を個々のコンポーネントにインポートすることで、CSS で頻繁に発生する名前の競合やその他の問題を回避できます。 RecipeTitle 用の .css ファイルの作成から始めましょう。

  1. src フォルダーに、RecipeTitle.css という名前の新しいファイルを追加します。

  2. 次の CSS を src/RecipeTitle.css に追加します。

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

RecipeTitle を更新する

次は、CSS をインポートし、値を表示するように RecipeTitle を更新します。

  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 ファイルをインポートしました。 feedback を表示する新しい h3 要素を追加しました。 三項演算子を使用し、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;

評価に合格するようにアプリ コンポーネントを更新する

feedback 属性を設定するように RecipeTitle を更新します。

  1. src/App.jsx を開きます。

  2. feedback 属性を追加するように既存の RecipeTitle 要素を変更します。

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

結果を見る

すべてのファイルを保存します。 ブラウザーは新しい表示で自動更新されます。

Screenshot of the recipe display.