【React】propsとは

propsとは

propsは、Reactコンポーネントに渡されるデータの受け渡しメカニズムです。propsを使用することで、親コンポーネントから子コンポーネントにデータを渡すことができます。propsは読み取り専用であり、子コンポーネント内で変更することはできません。

propsはJavaScriptのオブジェクトとしてコンポーネントに渡され、コンポーネント内のthis.propsを通じてアクセスされます。propsは、コンポーネントのインスタンス化時に指定され、そのコンポーネントが描画される際にそのまま使用されます。

使用方法

以下は、propsを使用して親コンポーネントから子コンポーネントにデータを渡す例です：

import React from 'react';

function ChildComponent(props) {
  return <div>{props.message}</div>;
}

function ParentComponent() {
  return <ChildComponent message="Hello, World!" />;
}

上記の例では、ParentComponentがChildComponentにmessageという名前のpropsを渡しています。ChildComponent内では、props.messageを使用して渡されたデータにアクセスし、それを表示しています。

まとめ

propsは、コンポーネント間でデータを受け渡すための重要なメカニズムです。親コンポーネントから子コンポーネントへのデータの受け渡しや、コンポーネントの動的な構築に使用されます。