function App() {
const name = 'Comp Name'
return (
<Comp name={name}>
<div slot="s1">solt1</div>
<div slot="s2">solt2</div>
</Comp>
)
}
import { ReactElement } from 'react'
// 插入多个children就是数组,否则就是ReactElement对象
interface IProps {
name: string
children?: ReactElement[]
}
function Comp({ name, children }: IProps) {
return (
<>
<h2>{name}</h2>
{ children.filter(chi => chi.props.slot === 's2') }
{ children.filter(chi => chi.props.slot === 's1') }
</>
)
}
标签:slot,IProps,name,ReactElement,chi,插槽,children
From: https://www.cnblogs.com/Lilc20201212/p/16758845.html