Propsとは

Propsは、Reactでコンポーネント間で情報を渡すための仕組みです。

Propsは、親コンポーネントから子コンポーネントにデータを渡すために使用されます。

以下の例では、AppコンポーネントがMessageコンポーネントにプロパティを渡しています。

Propsの例

Propsの例

この例では、Appコンポーネントが、Messageコンポーネントに"Hello World!"という文字列を含むプロパティを渡しています。

Messageコンポーネントは、そのプロパティを受け取り、表示します。

 

Reactでは、Propsは読み取り専用であるため、子コンポーネントは親コンポーネントから渡されたプロパティを変更することはできません。

しかし、親コンポーネントが新しいプロパティを渡すことで、子コンポーネントを再レンダリングすることができます。

 

また、Propsはオブジェクトとして渡されるため、複数のプロパティを渡すことができます。

例えば、以下のように複数のプロパティを含むオブジェクトを作成し、それをプロパティとして渡すことができます。

 

また別の例を以下に示します。

Propsの例2

Propsの例2

この例では、Appコンポーネントが、Messageコンポーネントにtextとauthorの2つのプロパティを含むオブジェクトを渡しています。

Messageコンポーネントは、それらのプロパティを受け取り、表示します。

 

Propsを使うことで、コンポーネント間で簡単に情報をやりとりすることができます。