react如何实现插槽
在React中实现插槽功能
React本身没有直接提供"插槽"的概念，但可以通过props.children或自定义props实现类似功能。以下是几种常见方法：
使用props.children实现基础插槽
通过props.children可以获取组件标签之间的内容，实现类似插槽的功能：
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 className="layout">
<header>{header}</header>
<main>{content}</main>
<footer>{footer}</footer>
</div>
);
}
// 使用
<Layout
header={<h1>页面标题</h1>}
content={<p>主要内容区域</p>}
footer={<small>版权信息</small>}
/>组合组件实现复杂插槽
对于更复杂的布局，可以组合使用多个组件：
function Page() {
return (
<Layout>
<Layout.Header>
<Navigation />
</Layout.Header>
<Layout.Content>
<Article />
</Layout.Content>
<Layout.Footer>
<Copyright />
</Layout.Footer>
</Layout>
);
}使用render props模式
render props是一种更高级的插槽模式，允许父组件控制渲染内容：
function DataFetcher({ render }) {
const [data, setData] = useState(null);
useEffect(() => {
fetchData().then(setData);
}, []);
return <div>{render(data)}</div>;
}
// 使用
<DataFetcher render={data => (
data ? <ShowData data={data} /> : <Loading />
)} />Context API实现全局插槽
对于需要在多层组件间传递的插槽内容，可以使用Context：
const SlotContext = createContext();
function App() {
return (
<SlotContext.Provider value={{ header: <Header /> }}>
<Page />
</SlotContext.Provider>
);
}
function Page() {
const { header } = useContext(SlotContext);
return <div>{header}</div>;
}注意事项
- 插槽内容在父组件中渲染，但最终显示在子组件位置
- 性能考虑：避免在插槽中传递频繁变化的组件
- TypeScript用户可以为插槽props定义明确类型
- 复杂场景可考虑使用第三方库如react-slot或react-adopt
这些方法可以根据具体需求组合使用，React的灵活性允许创建各种插槽模式的变体。
