当前位置：首页 > React

react如何实现插槽

2026-01-14 09:44:51React

React 实现插槽的方法

React 本身没有直接提供类似 Vue 的插槽（slot）概念，但可以通过以下几种方式实现类似功能：

使用 props.children

React 组件可以通过 props.children 获取组件标签之间的内容，这是最简单的插槽实现方式。

function Card(props) {
  return <div className="card">{props.children}</div>;
}

function App() {
  return (
    <Card>
      <h1>标题</h1>
      <p>内容</p>
    </Card>
  );
}

使用命名 props

通过自定义 props 实现命名插槽的效果，可以更灵活地控制插槽位置。

function Layout(props) {
  return (
    <div>
      <header>{props.header}</header>
      <main>{props.main}</main>
      <footer>{props.footer}</footer>
    </div>
  );
}

function App() {
  return (
    <Layout
      header={<h1>页眉</h1>}
      main={<p>主要内容</p>}
      footer={<div>页脚</div>}
    />
  );
}

使用 React.cloneElement

当需要向插槽内容传递额外 props 时，可以使用 React.cloneElement。

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 API

对于深层嵌套的组件插槽，可以结合 Context API 实现。

const SlotContext = createContext();

function SlotProvider(props) {
  const [slots, setSlots] = useState({});

  return (
    <SlotContext.Provider value={{ slots, setSlots }}>
      {props.children}
    </SlotContext.Provider>
  );
}

function Slot(props) {
  const { setSlots } = useContext(SlotContext);

  useEffect(() => {
    setSlots(prev => ({ ...prev, [props.name]: props.children }));
  }, [props.children]);

  return null;
}

function SlotContent({ name }) {
  const { slots } = useContext(SlotContext);
  return slots[name] || null;
}

使用 render props 模式

通过函数作为 prop 的方式实现更灵活的插槽逻辑。

function DataFetcher({ render }) {
  const [data, setData] = useState(null);

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

  return render(data);
}

function App() {
  return (
    <DataFetcher
      render={data => data ? <div>{data}</div> : <p>加载中...</p>}
    />
  );
}

这些方法可以根据具体场景灵活组合使用，React 的插槽实现相比 Vue 更灵活但也需要更多手动控制。

react如何实现插槽