React プロップによるコンポーネントの受け渡し
2024-09-28
React コンポーネントをプロップとして渡す
日本語
React では、コンポーネントを他のコンポーネントに渡して、再利用可能なコードを作成することができます。これを プロップ (props) と呼びます。
例
function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}
function App() {
return (
<div>
<Greeting name="Alice" />
<Greeting name="Bob" />
</div>
);
}
この例では、Greeting コンポーネントは name プロップを受け取っています。App コンポーネントは Greeting コンポーネントを2回呼び出し、それぞれに異なる name プロップを渡しています。
ポイント
- プロップは子コンポーネントから親コンポーネントに情報を渡すために使用することができます。
- プロップは読み取り専用であり、コンポーネント内で変更することはできません。
- プロップはコンポーネントの入力値として使用されます。
React プロップによるコンポーネントの受け渡し：コード例解説
コード例1：基本的なプロップの渡し方
function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}
function App() {
return (
<div>
<Greeting name="Alice" />
<Greeting name="Bob" />
</div>
);
}
- App コンポーネント
- Greeting コンポーネントを2回呼び出しています。
- それぞれに
nameプロップとして異なる値を渡しています。
- Greeting コンポーネント
propsパラメータを受け取ります。これは、親コンポーネントから渡されるプロパティの集合です。props.nameで、渡された名前を取得し、h1 タグの中に表示しています。
解説
- コンポーネント内での受け取り
コンポーネントの関数内で、propsオブジェクトから必要なプロパティを取り出して使用します。 - JSXでの書き方
JSX のタグの属性としてプロップを指定します。name="Alice"のように、属性名と値のペアで記述します。 - プロップの役割
コンポーネント間のデータの受け渡しを可能にします。親コンポーネントから子コンポーネントへ、一方向にデータを渡すことができます。
コード例2：オブジェクトをプロップとして渡す
function Person(props) {
return <div>
<p>名前: {props.person.name}</p>
<p>年齢: {props.person.age}</p>
</div>;
}
function App() {
const personData = { name: 'Taro', age: 30 };
return <Person person={personData} />;
}
- App コンポーネント
- Person コンポーネント
props.personで、渡されたオブジェクトを受け取ります。- オブジェクトのプロパティである
nameとageを表示しています。
- ネストされたプロパティ
オブジェクトのネストされたプロパティにアクセスする際は、ドットで区切ってアクセスします。
コード例3：関数もプロップとして渡す
function Button(props) {
return <button onClick={props.onClick}>Click me</button>;
}
function App() {
const handleClick = () => {
console.log('Clicked!');
};
return <Button onClick={handleClick} />;
}
- App コンポーネント
- Button コンポーネント
- イベントハンドラー
onClickのようなイベントハンドラーに、関数を渡すことで、イベントが発生した際にその関数が実行されます。 - 関数プロップ
関数をプロップとして渡すことで、子コンポーネントから親コンポーネントのメソッドを呼び出すことができます。
- プロップは、コンポーネントを再利用可能にし、複雑なUIを構築するための基盤となります。
- プロップは、プリミティブな値だけでなく、オブジェクトや関数も渡すことができます。
- プロップは、コンポーネント間のデータの受け渡しに不可欠です。
- 状態管理が必要な場合は、React の
useStateやuseReducerなどのフックを使用します。 - プロップは読み取り専用です。子コンポーネント内でプロップを変更しようとするとエラーになります。
Render Props
- デメリット
- メリット
- 柔軟なレンダリングが可能: 子コンポーネント内で、渡されたレンダー関数を使って様々な要素をレンダリングできます。
- 状態管理の分離: 状態は親コンポーネントで管理し、子コンポーネントはレンダリングのロジックに特化できます。
- 考え方
親コンポーネントから子コンポーネントに、レンダー関数 (JSX を返す関数) を渡す方法です。
function MyButton({ render }) {
return <button onClick={render}>Click me</button>;
}
function App() {
const handleClick = () => {
console.log('Clicked!');
};
return (
<MyButton render={() => (
<div>Clicked!</div>
)} />
);
}
Higher-Order Components (HOC)
- デメリット
- メリット
- 再利用性が高い: 共通の機能をHOCとして抽出し、複数のコンポーネントに適用できます。
- 関数型プログラミングの概念を取り入れやすい: 関数を返す関数でコンポーネントを拡張できます。
- 考え方
コンポーネントをラップして、新たな機能を追加するパターンです。
function withLogging(WrappedComponent) {
return props => {
console.log('Component mounted:', WrappedComponent.name);
return <WrappedComponent {...props} />;
};
}
const LoggedButton = withLogging(Button);
Context API
- メリット
- 深くネスト
- 考え方
アプリケーション全体で共有したいデータを、コンポーネントツリーを通して渡すための仕組みです。
javascript reactjs
