“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 13 天，点击查看活动详情”

1. 简介

React 使用插槽，在Vue中拥有一个非常优秀的组件组合功能，叫做插槽，在React中有一个也有相同的功能叫做组合模式

有些组件无法提前知晓它们子组件的具体内容，我们建议这些组件使用一个特殊的 children prop 来将他们的子组件传递到渲染结果中

2. 代码案例

1. 默认插槽

1. 父组件需要接收一个children值，props.children可任意分发组件内容
2. 当无内容时，为undefined
3. 有数据时返回为一个ReactNode元素

• 模板组件

interface Props {
    children?: ReactNode;
}

function MainCom(props: Props) {

    return <div>
        {props.children}
    </div>
}

• 使用模板组件

function App() {
    return 
        <MainCom>
            <h1>设置标题</h1>
            <h2>小标题</h2>
            <h2>大标题</h2>
        </MainCom>
}

2. 具名插槽

定义具名插槽时与默认插槽时一样的只有使用的方式不同，使用的方式类似于传递一个属性

1. 模板组件

interface Props {
    children?: ReactNode;
    left?: ReactNode;
    right?: ReactNode;
}

function MainCom(props: Props) {

    return <div>
        {props.children}
        <div>
            <p>left</p>
            {props?.left}
        </div>

        <div>
            <p>right</p>
            {props.right}
        </div>
    </div>
}

2. 使用模板组件

function App() {
    return <AppDiv>
        <MainCom
            left={
                <div>
                    左边组件
                </div>
            }
            right={
                <div>右边组件</div>
            }
        >
            <h1>设置标题</h1>
        </MainCom>
    </AppDiv>
}

3. 多个子节点

1. 如果有一个子节点，数据类型 ReactNode
2. 如果有一个子节点，数据类型 可以是ReactNode 或 ReactNode[]
3. 先给模板组件传递一组div

function App() {
    return <AppDiv>
        <MainCom>
            <div>张三</div>
            <div>李四</div>
            <div>王五</div>
            <div>赵六</div>
        </MainCom>
    </AppDiv>
}

4. 再看模板组件
   • 参数变成了 children 变为了数组对象
   • 使用map遍历数据
   • console.log(children) 打印出来的数据的类型是一个个 Symbol(react.element)

interface Props {
    children?: ReactNode[];
    left?: ReactNode;
    right?: ReactNode;
}

function MainCom(props: Props) {

    return <div>
        {props.children?.map(children => {
            console.log(children)
            return children
        })}
    </div>
}

3. 总结

1. 通过学习React的组合模式，实现组件间的代码重用。
2. React的默认插槽与具名插槽