Propsとは
Propsは、Reactでコンポーネント間で情報を渡すための仕組みです。
Propsは、親コンポーネントから子コンポーネントにデータを渡すために使用されます。
以下の例では、AppコンポーネントがMessageコンポーネントにプロパティを渡しています。
この例では、Appコンポーネントが、Messageコンポーネントに"Hello World!"という文字列を含むプロパティを渡しています。
Messageコンポーネントは、そのプロパティを受け取り、表示します。
Reactでは、Propsは読み取り専用であるため、子コンポーネントは親コンポーネントから渡されたプロパティを変更することはできません。
しかし、親コンポーネントが新しいプロパティを渡すことで、子コンポーネントを再レンダリングすることができます。
また、Propsはオブジェクトとして渡されるため、複数のプロパティを渡すことができます。
例えば、以下のように複数のプロパティを含むオブジェクトを作成し、それをプロパティとして渡すことができます。
また別の例を以下に示します。
この例では、Appコンポーネントが、Messageコンポーネントにtextとauthorの2つのプロパティを含むオブジェクトを渡しています。
Messageコンポーネントは、それらのプロパティを受け取り、表示します。
Propsを使うことで、コンポーネント間で簡単に情報をやりとりすることができます。