react怎么实现插槽
实现插槽的基本方法
React本身没有直接提供"插槽"概念，但可以通过props.children或自定义props实现类似功能。插槽模式常用于组件复用和内容分发。
使用props.children实现基础插槽：
function Card(props) {
return <div className="card">{props.children}</div>;
}
// 使用
<Card>
<h1>标题</h1>
<p>内容</p>
</Card>具名插槽实现
通过props传递React元素实现类似Vue的具名插槽：
function Layout({ header, content, footer }) {
return (
<div>
<header>{header}</header>
<main>{content}</main>
<footer>{footer}</footer>
</div>
);
}
// 使用
<Layout
header={<h1>头部</h1>}
content={<p>主要内容</p>}
footer={<div>底部</div>}
/>作用域插槽实现
通过render props模式实现带数据传递的插槽：
function DataList({ data, renderItem }) {
return <ul>{data.map((item) => renderItem(item))}</ul>;
}
// 使用
<DataList
data={[{ id: 1, name: "项目1" }]}
renderItem={(item) => <li key={item.id}>{item.name}</li>}
/>组合组件模式
通过组件组合实现更复杂的插槽结构：
function TabPanel({ children }) {
return <div className="tabs">{children}</div>;
}
function Tab({ label, children }) {
return (
<div className="tab">
{label}
<div className="content">{children}</div>
</div>
);
}
// 使用
<TabPanel>
<Tab label="标签1">内容1</Tab>
<Tab label="标签2">内容2</Tab>
</TabPanel>Context API实现深层插槽
对于深层嵌套的组件，可以结合Context实现插槽：
const SlotContext = React.createContext();
function Provider({ slots, children }) {
return (
<SlotContext.Provider value={slots}>
{children}
</SlotContext.Provider>
);
}
function Consumer({ name }) {
return (
<SlotContext.Consumer>
{(slots) => slots[name] || null}
</SlotContext.Consumer>
);
}
// 使用
<Provider slots={{ header: <h1>动态标题</h1> }}>
<div>
<Consumer name="header" />
</div>
</Provider>React的插槽实现方式灵活多样，开发者可以根据具体场景选择最合适的方法。组件组合和render props是React官方推荐的方式，而Context适合跨层级的数据传递。
