当前位置：首页 > React

react实现slot

2026-01-26 13:54:56React

在React中实现类似Vue的"slot"功能（即内容分发），可以通过以下几种方式实现：

使用`props.children`

React组件默认支持通过props.children接收子元素，这是最基础的"slot"实现方式：

react实现slot

// 父组件
<Parent>
  <div>这是插入到slot的内容</div>
</Parent>

// 子组件
function Parent({ children }) {
  return <div className="parent">{children}</div>;
}

命名插槽（Named Slots）

通过props传递React元素实现命名插槽：

// 父组件
<Layout
  header={<Header />}
  content={<MainContent />}
  footer={<Footer />}
/>

// 子组件
function Layout({ header, content, footer }) {
  return (
    <div className="layout">
      <div className="header">{header}</div>
      <div className="content">{content}</div>
      <div className="footer">{footer}</div>
    </div>
  );
}

使用render props模式

更灵活的插槽实现方式，可以传递函数作为内容：

react实现slot

// 父组件
<DataFetcher>
  {(data) => <div>{data}</div>}
</DataFetcher>

// 子组件
function DataFetcher({ children }) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchData().then(setData);
  }, []);

  return <div>{data ? children(data) : 'Loading...'}</div>;
}

使用Context API

对于深层嵌套的组件插槽，可以结合Context使用：

const SlotContext = createContext();

// 父组件
<SlotProvider>
  <SlotContext.Provider value={{ header: <Header /> }}>
    <ChildComponent />
  </SlotContext.Provider>
</SlotProvider>

// 子组件
function ChildComponent() {
  const { header } = useContext(SlotContext);
  return <div>{header}</div>;
}

使用第三方库

一些专门为React设计的库可以简化插槽实现：

@fluentui/react-components（微软Fluent UI）
react-slot-fill（专门的插槽库）

// 使用react-slot-fill示例
import { Slot, Fill } from 'react-slot-fill';

// 定义插槽
<Slot name="header" />

// 填充内容
<Fill name="header">
  <h1>页面标题</h1>
</Fill>

每种方法各有优劣，props.children适合简单场景，命名props适合明确分区的内容，render props适合需要数据传递的场景，Context适合深层嵌套，而第三方库可以提供更接近Vue的开发体验。