效果预览

技术要点

当父组件给子组件传递的 JSX 超过一个标签时，子组件接收到的 children 是一个数组，通过解析数组中各 JSX 的属性 slot ，即可实现具名插槽的分发！

代码实现

Father.jsx

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

Child.jsx

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;