react18 实现具名插槽

import Child from "./Child";

export default function Father() {
  return (
    <div>
      <Child>
        <h2 slot="title">标题</h2>
        <p slot="content">内容</p>
      </Child>
    </div>
  );
}

function Child({ children }) {
  let slotDic = {};
  if (Array.isArray(children)) {
    children.forEach((child) => {
      let slotName = child.props.slot;

      if (slotName) {
        slotDic[slotName] = child;
      }
    });
  }

  return (
    <div>
      <h1>子组件</h1>
      {slotDic.title}
      {slotDic.content}
    </div>
  );
}

export default Child;