Object Propsによる名前付きスロット
名前付きPropsでJSXを渡し、header/body/footerスロットを実装します
「Object Propsによる名前付きスロット」はCoddyKit上の無料React Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全4レッスンが含まれています。
ようこそ
childrenの制限
名前付きプロパティによるスロット
function Card({ header, body, footer }) {
return (
<div className="card">
<div className="card-header">{header}</div>
<div className="card-body">{body}</div>
<div className="card-footer">{footer}</div>
</div>
);
}
// Usage
<Card
header={<h2>Title</h2>}
body={<p>Content here</p>}
footer={<button>OK</button>}
/>省略可能なスロット
function Card({ header, children, footer }) {
return (
<div>
{header && <div className="header">{header}</div>}
<div className="body">{children}</div>
{footer && <div className="footer">{footer}</div>}
</div>
);
}childrenと名前付きスロットの併用
<Dialog
title="Confirm"
actions={<><button>Cancel</button><button>OK</button></>}
>
<p>Are you sure?</p> {/* children = primary slot */}
</Dialog>TypeScript: 名前付きスロットの型付け
interface CardProps {
header?: React.ReactNode;
children: React.ReactNode;
footer?: React.ReactNode;
}名前付きスロットとコンパウンドコンポーネントの比較
コンポーネントをスロットとして渡す
function Timeline({ renderItem, items }) {
return (
<ul>
{items.map(item => (
<li key={item.id}>{renderItem(item)}</li>
))}
</ul>
);
}
<Timeline
items={data}
renderItem={item => <EventCard event={item} />}
/>名前付きスロットによるレイアウト構成
名前付きスロットのドキュメント化
確認問題
復習
次のレッスン
よくある質問
「Object Propsによる名前付きスロット」レッスンは無料ですか？
はい。「Object Propsによる名前付きスロット」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全4レッスンが含まれています。
「Object Propsによる名前付きスロット」で何を学びますか？
名前付きPropsでJSXを渡し、header/body/footerスロットを実装します ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
React Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「Object Propsによる名前付きスロット」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このReact Academyレッスンでコードを書いて実行できますか？
はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- props.childrenの基礎
- React.Childrenユーティリティ
- Object Propsによる名前付きスロット
- cloneElementでPropsを複製・注入する