Render Propsパターン
JSXを返す関数をpropとして渡し、UIを密結合にせずに振る舞いを共有します。
「Render Propsパターン」はCoddyKit上の無料React Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全4レッスンが含まれています。
ようこそ
Render Propsとは
<DataProvider render={data => <UserCard user={data} />} />シンプルなRender Propの例
function Toggle({ render }) {
const [on, setOn] = useState(false);
return render(on, () => setOn(!on));
}
<Toggle render={(on, toggle) => (
<button onClick={toggle}>{on ? 'Close' : 'Open'}</button>
)} />childrenをRender Propとして使う
<Toggle>
{(on, toggle) => (
<div>
{on && <Panel />}
<button onClick={toggle}>Toggle</button>
</div>
)}
</Toggle>マウス位置のトラッキング
function MouseTracker({ children }) {
const [pos, setPos] = useState({ x: 0, y: 0 });
return (
<div onMouseMove={e => setPos({ x: e.clientX, y: e.clientY })}>
{children(pos)}
</div>
);
}Render Propsとカスタムフックの比較
// Old: render props
<Mouse render={pos => <p>{pos.x}</p>} />
// Modern: custom hook
const pos = useMouse();
<p>{pos.x}</p>Render Propsが今でも適している場合
パフォーマンスに関する注意
// Avoid: new function every render
<Toggle render={pos => <Dot pos={pos} />} />
// Better: stable reference
const renderDot = pos => <Dot pos={pos} />;
<Toggle render={renderDot} />Render Propsの合成
ライブラリでのRender Props
クイックチェック
まとめ
次のレッスン
よくある質問
「Render Propsパターン」レッスンは無料ですか？
はい。「Render Propsパターン」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全4レッスンが含まれています。
「Render Propsパターン」で何を学びますか？
JSXを返す関数をpropとして渡し、UIを密結合にせずに振る舞いを共有します。 ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
React Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「Render Propsパターン」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このReact Academyレッスンでコードを書いて実行できますか？
はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Render Propsパターン
- Higher-Order Components（HOC）の基礎
- HOC・Render Props・Custom Hooksの比較
- HOCからCustom Hookへのリファクタリング