props の概要

3 分

React コンポーネントは、再利用可能なユニットになるように設計されています。再利用可能にするために、コンポーネントにはプロパティ (props) を介してデータを渡すことができます。

props は、コンポーネントの 1 つインスタンスから使用できる読み取り専用の値です。プログラムを使って設定することや、HTML 要素の属性を設定するときに使用するものと同じ構文を使って設定することができます。通常の HTML とは異なり、props は文字列やプリミティブ値に限定されません。複雑なオブジェクトや配列を指定することもできます。 props は、コンポーネント内の this のプロパティとして使用できます。 props には、コンポーネントに必要な数のプロパティを含めることができます。また、オブジェクトやその他のデータ型を格納できます。

シナリオ

コンポーネントを再利用できるようにするには、通常、props として表示されるデータを渡します。ここでは、レシピのタイトル (プロパティとして渡されます) を表示する RecipeTitle という名前のコンポーネントを作成します。

コンポーネントを作成する

概要で説明したように、Visual Studio Code で starter フォルダーを開きます。
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 コンポーネントと似ていますが、2 つの重要な更新点があります。

1 つ目は、props という名前のパラメーターを受け取ることです。これには、使用時にコンポーネントに渡されるすべての属性またはプロパティが自動的に含まれます。

2 つ目は、通常のパラメーターと同じように、props に格納される値を使用できることです。探しているのは title という名前の値です。これを h2 要素内に表示します。

コンポーネントを使用する

次は App.jsx を更新し、title プロパティを持つ新しい RecipeTitle コンポーネントを使用してみましょう。

App.jsx を開きます
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 },
    ],
};

Note

このモジュールの演習の過程で、この recipe オブジェクト全体を使用します。今の段階で注目すべき点は title です。

TODO: Add RecipeTitle component という行の下に次のコードを追加します。
```
{/* TODO: Add RecipeTitle component */}
<RecipeTitle title={ recipe.title } />
```

コードを調べる

まず表示するレシピを表すオブジェクトを作成し、それに title プロパティを追加します。次に、HTML 要素やその他の React コンポーネントを使用する場合と同じ方法で RecipeTitle コンポーネントを使用します。主な違いは、title 属性を recipe.title の値に設定することです。ハンドルバー ({ }) を使用すると、値を動的に読み取ることができます。

Note

title に使用する値が文字列リテラルであった場合は、構文 title='Recipe title を使用してプロパティを設定できます。

ページを表示する

すべてのファイルを保存します。
お使いのブラウザーに戻り、ページを更新します。これで、ページに Mashed Potatoes (マッシュポテト) というタイトルが表示されます。

props の概要

シナリオ

コンポーネントを作成する

コードを調べる

コンポーネントを使用する

コードを調べる

ページを表示する

フィードバック