react19【动态插槽】

使用场景

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

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

实现方案

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

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

子组件的内部实现

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

• 把 slots 对象拆成数组

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

• 用 map 遍历每个插槽项

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