react如何实现slot
React 实现 Slot 功能的方法
React 中没有直接的 "slot" 概念，但可以通过以下几种方式实现类似 Vue 中 slot 的功能：
使用 props.children
通过 props.children 可以获取组件标签之间的内容，这是 React 中最基础的 slot 实现方式。
function Card(props) {
return <div className="card">{props.children}</div>;
}
// 使用
<Card>
<h1>标题</h1>
<p>内容</p>
</Card>命名插槽模式
通过传递 React 元素作为 props 来实现命名插槽的效果。
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={<small>页脚</small>}
/>使用 render props
通过函数作为 prop 来动态渲染内容，提供更大的灵活性。
function Tabs({ renderHeader, renderContent }) {
return (
<div>
<div className="tabs-header">{renderHeader()}</div>
<div className="tabs-content">{renderContent()}</div>
</div>
);
}
// 使用
<Tabs
renderHeader={() => <h2>标签页标题</h2>}
renderContent={() => <p>标签页内容</p>}
/>Context API 实现动态插槽
结合 Context API 可以实现更复杂的插槽逻辑，允许深层嵌套组件访问插槽内容。
const SlotContext = React.createContext();
function SlotProvider({ children, slots }) {
return (
<SlotContext.Provider value={slots}>
{children}
</SlotContext.Provider>
);
}
function Slot({ name }) {
return (
<SlotContext.Consumer>
{slots => slots[name] || null}
</SlotContext.Consumer>
);
}
// 使用
<SlotProvider slots={{
header: <h1>自定义标题</h1>,
footer: <footer>自定义页脚</footer>
}}>
<div>
<Slot name="header" />
<main>主要内容</main>
<Slot name="footer" />
</div>
</SlotProvider>高阶组件实现
通过高阶组件可以封装插槽逻辑，提供更简洁的 API。
function withSlots(Component) {
return function WrappedComponent({ slots, ...props }) {
return <Component {...props} slots={slots} />;
};
}
// 使用
const EnhancedCard = withSlots(Card);
<EnhancedCard slots={{
title: <h2>卡片标题</h2>,
body: <p>卡片内容</p>
}} />每种方法适用于不同的场景，简单内容分发使用 props.children 即可，复杂布局考虑命名插槽或 Context API 方案，需要最大灵活性时可以选择 render props 模式。
