当前位置：首页 > React

react如何使用插槽

2026-02-26 16:05:03React

使用 `props.children` 实现基础插槽

在 React 中，插槽的核心是通过 props.children 传递子组件。父组件可以通过嵌套子元素的方式将内容传递给子组件，子组件通过 props.children 接收并渲染。

父组件示例：

<ParentComponent>
  <div>这是插槽内容</div>
</ParentComponent>

子组件示例：

function ParentComponent(props) {
  return <div>{props.children}</div>;
}

命名插槽（通过 `props` 传递）

如果需要多个插槽（类似 Vue 的具名插槽），可以通过传递特定 props 实现。父组件将不同内容分配到不同的 props，子组件按需渲染。

父组件示例：

react如何使用插槽

<Modal
  header={<h1>标题</h1>}
  body={<p>正文内容</p>}
  footer={<button>关闭</button>}
/>

子组件示例：

function Modal(props) {
  return (
    <div>
      <div className="header">{props.header}</div>
      <div className="body">{props.body}</div>
      <div className="footer">{props.footer}</div>
    </div>
  );
}

使用 `React.cloneElement` 动态控制插槽

通过 React.cloneElement 可以向插槽内容注入额外的 props 或修改行为。适用于需要动态控制子组件的场景。

示例：

react如何使用插槽

function Tabs(props) {
  const [activeIndex, setActiveIndex] = useState(0);
  return (
    <div>
      {React.Children.map(props.children, (child, index) =>
        React.cloneElement(child, {
          isActive: index === activeIndex,
          onClick: () => setActiveIndex(index),
        })
      )}
    </div>
  );
}

使用 `Context` 跨层级传递插槽内容

对于深层嵌套的组件，可以通过 Context 共享插槽内容，避免逐层传递 props。

示例：

const SlotContext = React.createContext();

function Layout() {
  return (
    <SlotContext.Provider value={{ header: <Header />, footer: <Footer /> }}>
      <Page />
    </SlotContext.Provider>
  );
}

function Page() {
  const { header, footer } = useContext(SlotContext);
  return (
    <div>
      {header}
      <main>页面内容</main>
      {footer}
    </div>
  );
}

使用 `render props` 实现灵活插槽

通过函数类型的 props，父组件可以动态决定插槽内容的渲染逻辑。

示例：

function DataFetcher({ render }) {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetchData().then(setData);
  }, []);

  return <div>{render(data)}</div>;
}

// 使用方式
<DataFetcher render={(data) => (data ? <p>{data}</p> : <p>加载中...</p>)} />