Reactのプロップスとは何ですか？使い方

Reactコンポーネント間でデータを受け渡すために使用されるのが、Reactプロップス(props)です。プロップスは、コンポーネントに値や関数を渡すためのメカニズムです。親コンポーネントから子コンポーネントにデータを渡すために使用されます。

プロップスは、親コンポーネントから子コンポーネントに渡される読み取り専用のデータとして機能します。子コンポーネントは、受け取ったプロップスを使用してUIの一部をレンダリングしたり、イベント処理を行ったりすることができます。

以下に、Reactプロップスの使用方法とコード例を示します。

プロップスの定義と渡し方:

親コンポーネントで子コンポーネントにデータを渡すためには、子コンポーネントのタグ内で属性として値を指定します。例えば、以下のようにします。

<ChildComponent name="John" age={25} />

プロップスの受け取り方:

子コンポーネントでは、propsオブジェクトを介してプロップスを受け取ることができます。以下は、名前と年齢を表示する子コンポーネントの例です。

function ChildComponent(props) {
  return (
    <div>
      <p>Name: {props.name}</p>
      <p>Age: {props.age}</p>
    </div>
  );
}

デフォルトのプロップス値の設定:

子コンポーネントにデフォルトのプロップス値を設定することもできます。以下は、名前が指定されなかった場合にデフォルトの値を表示する例です。

function ChildComponent(props) {
  const name = props.name || 'Unknown';
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {props.age}</p>
    </div>
  );
}

Reactプロップスは、コンポーネント間のデータの受け渡しを容易にする強力な機能です。これを使うことで、コンポーネントの再利用性と保守性を向上させることができます。是非、Reactプロップスを活用して効率的なコードを書いてみてください。