当前位置：首页 > React

react如何使用插槽

2026-01-24 02:10:13React

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

React中插槽的核心是通过props.children传递子组件。父组件在标签内部放置的内容会自动成为children属性：

// 父组件
<Card>
  <h1>标题内容</h1>
  <p>正文内容</p>
</Card>

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

命名插槽实现方式

通过传递React元素作为props实现具名插槽效果：

react如何使用插槽

// 父组件
<Layout
  header={<Header />}
  sidebar={<Sidebar />}
  content={<MainContent />}
/>

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

使用render props模式

通过函数作为子组件实现更灵活的插槽：

// 父组件
<DataProvider>
  {(data) => <Display data={data} />}
</DataProvider>

// 子组件DataProvider
function DataProvider(props) {
  const [data, setData] = useState(null);
  // 获取数据逻辑...
  return props.children(data);
}

组合组件模式

通过组件组合实现类似Vue的作用域插槽：

react如何使用插槽

// 定义可组合组件
function Tabs({ children }) {
  const [activeTab, setActiveTab] = useState(0);
  return (
    <div>
      {React.Children.map(children, (child, index) =>
        React.cloneElement(child, {
          isActive: index === activeTab,
          onClick: () => setActiveTab(index)
        })
      )}
    </div>
  );
}

// 使用方式
<Tabs>
  <Tab label="First">内容1</Tab>
  <Tab label="Second">内容2</Tab>
</Tabs>

Context API实现跨组件插槽

通过Context实现深层嵌套组件间的插槽通信：

const SlotContext = createContext();

// 提供者组件
function SlotProvider({ children, slots }) {
  return (
    <SlotContext.Provider value={slots}>
      {children}
    </SlotContext.Provider>
  );
}

// 消费者组件
function NamedSlot({ name }) {
  const slots = useContext(SlotContext);
  return slots[name] || null;
}

类型检查与默认值

为插槽添加PropTypes类型检查和默认值：

Card.propTypes = {
  children: PropTypes.node,
  header: PropTypes.element,
  footer: PropTypes.element
};

Card.defaultProps = {
  header: <DefaultHeader />
};