React.js コンポーネントのプロパティ更新：親コンポーネントから子コンポーネントへ props を渡す
プロパティ更新方法
React.js におけるコンポーネントのプロパティ更新方法は、大きく2種類に分けられます。
- 親コンポーネントから子コンポーネントへ props を渡す
- コンポーネント内部で props を直接更新する
それぞれ詳細を説明します。
親コンポーネントから子コンポーネントへ props を渡す
子コンポーネントのプロパティは、親コンポーネントから props として渡されます。親コンポーネントで props の値を変更することで、子コンポーネントのプロパティを更新することができます。
// 親コンポーネント
const ParentComponent = () => {
const [count, setCount] = useState(0);
return (
<div>
<ChildComponent count={count} />
</div>
);
};
// 子コンポーネント
const ChildComponent = ({ count }) => {
return (
<div>
カウント: {count}
</div>
);
};
上記の例では、ParentComponent で count の値を更新すると、ChildComponent に渡される props の count も更新されます。
コンポーネント内部で props を直接更新する
コンポーネント内部で useState や useReducer などのフックを使用して props を直接更新することもできます。
// コンポーネント
const Component = () => {
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1);
};
return (
<div>
カウント: {count}
<button onClick={handleClick}>カウントアップ</button>
</div>
);
};
上記の例では、handleClick 関数が実行されるたびに、count の値が更新され、コンポーネントが再レンダリングされます。
更新時の注意点
- コンポーネントのプロパティを更新すると、コンポーネントが再レンダリングされます。
- パフォーマンス上の理由から、必要最低限の更新にとどめることが重要です。
- オブジェクトや配列などの複雑なデータ構造を更新する場合は、イミュータブルなデータ構造を使用する必要があります。
親コンポーネントから子コンポーネントへ props を渡す
// 親コンポーネント
const ParentComponent = () => {
const [count, setCount] = useState(0);
return (
<div>
<ChildComponent count={count} />
<button onClick={() => setCount(count + 1)}>カウントアップ</button>
</div>
);
};
// 子コンポーネント
const ChildComponent = ({ count }) => {
return (
<div>
カウント: {count}
</div>
);
};
ReactDOM.render(<ParentComponent />, document.getElementById('root'));
コンポーネント内部で props を直接更新する
const Component = () => {
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1);
};
return (
<div>
カウント: {count}
<button onClick={handleClick}>カウントアップ</button>
</div>
);
};
ReactDOM.render(<Component />, document.getElementById('root'));
上記のコードを実行すると、ブラウザに "カウント: 0" と表示されます。"カウントアップ" ボタンをクリックするたびに、count の値が更新され、"カウント: 1", "カウント: 2" と表示されます。
上記以外にも、様々な方法でコンポーネントのプロパティを更新することができます。詳細は React.js の公式ドキュメントを参照してください。
補足
- 上記のサンプルコードは、React.js のバージョン 18 を使用しています。
- コードを実行するには、
reactとreact-domのライブラリが必要です。
参考になれば幸いです。
React.js コンポーネントのプロパティ更新方法：その他の方法
useContext Hook を使用すると、コンポーネントツリー全体でコンテキストオブジェクトを共有することができます。コンテキストオブジェクトは、プロパティを含むことができます。
const MyContext = createContext({ count: 0 });
const ParentComponent = () => {
const [count, setCount] = useState(0);
return (
<MyContext.Provider value={{ count, setCount }}>
<ChildComponent />
</MyContext.Provider>
);
};
const ChildComponent = () => {
const { count } = useContext(MyContext);
return (
<div>
カウント: {count}
</div>
);
};
ReactDOM.render(<ParentComponent />, document.getElementById('root'));
上記の例では、MyContext というコンテキストオブジェクトを作成し、count というプロパティを含めています。ParentComponent で count の値を更新すると、ChildComponent で使用される count の値も更新されます。
useRef Hook を使用すると、コンポーネントのレンダリング間で値を保持することができます。
const Component = () => {
const countRef = useRef(0);
const handleClick = () => {
countRef.current++;
// ...
};
return (
<div>
カウント: {countRef.current}
<button onClick={handleClick}>カウントアップ</button>
</div>
);
};
ReactDOM.render(<Component />, document.getElementById('root'));
上記の例では、countRef という ref を作成し、count の値を保持しています。handleClick 関数が実行されるたびに、countRef.current の値が更新されます。
props.children を使用すると、子コンポーネントに props を渡すことができます。
const ParentComponent = () => {
const [count, setCount] = useState(0);
return (
<div>
<ChildComponent>
{count}
</ChildComponent>
</div>
);
};
const ChildComponent = ({ children }) => {
return (
<div>
カウント: {children}
</div>
);
};
ReactDOM.render(<ParentComponent />, document.getElementById('root'));
上記の例では、ParentComponent で count の値を ChildComponent に渡しています。ChildComponent では、props.children を使用して count の値を取得しています。
render props パターンを使用すると、コンポーネントのレンダリングロジックを子コンポーネントに委譲することができます。
const ParentComponent = () => {
const [count, setCount] = useState(0);
return (
<div>
<ChildComponent
render={({ count, setCount }) => (
<div>
カウント: {count}
<button onClick={() => setCount(count + 1)}>カウントアップ</button>
</div>
)}
/>
</div>
);
};
const ChildComponent = ({ render }) => {
return render();
};
ReactDOM.render(<ParentComponent />, document.getElementById('root'));
どの方法を使用するべきかは、状況によって異なります。以下は、いくつかの一般的なガイドラインです。
- 親コンポーネントから子コンポーネントへ props を渡す: 子コンポーネントが親コンポーネントの状態に依存する場合は、この方法を使用します。
- コンポーネント内部で props を直接更新する: コンポーネントの状態が単純な場合は、この方法を使用します。
javascript reactjs properties
