react19【动态插槽】

朝阳392026-02-01 9:03

使用场景

比如你在做一个仪表盘页面（Dashboard），它可能会显示：

折线图（LineChart）
实时统计（RealTimeStats）
通知中心（NotificationCenter）
......

实现方案

用一个统一的 slots 对象，把每个插槽的"名字"作为 key，对应的 React 组件作为 value。

html 复制代码

// 使用端
<Dashboard slots={{
  chart: LineChart,
  stats: RealTimeStats,
  alerts: NotificationCenter
}} />

子组件的内部实现

ts 复制代码

const Dashboard = ({ slots }) => {
  return Object.entries(slots).map(([slotName, Component]) => (
    <div key={slotName} className={`slot-${slotName}`}>
      <Component />
    </div>
  ));
};

把 slots 对象拆成数组

ts 复制代码

[
	["chart", LineChart], 
	["stats", RealTimeStats], 
	["alerts", NotificationCenter]
]

用 map 遍历每个插槽项

每一项都有个名字（比如 "chart"）和对应组件（比如 LineChart）