React中的插槽处理机制

在运用react时，经常会遇到父组件传给子组件属性 值等，但是有时可能会需要传递一些DOM结构，这时就需要用到插槽机制

插槽的作用

和属性一样，都是想办法，让组件具备更强的复用性  
+ 传递数据值用属性  
+ 传递HTML结构，用插槽

我们在调用组件时会传不同的DOM结构

前面文章提到过，传递一个时，children为一个单独的值，多个时，为数组

import React from "react";
import ReactDOM from "react-dom/client";
import DemoOne from "./views/DemoOne"

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
    <DemoOne style={{color:"red"}} data={1} x={'sas'}>
        <p>我是页眉</p>
    </DemoOne>
);

import React from "react";
import ReactDOM from "react-dom/client";
import DemoOne from "./views/DemoOne"

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
    <DemoOne style={{color:"red"}} data={1} x={'sas'}>
        <p>我是页眉</p>
        <p>我是页脚</p>
    </DemoOne>
);

可是如果想要根据不同需求，把不同的DOM节点放在不同的位置，这时该怎么做呢？

import PropTypes from 'prop-types';

import React from 'react';



const DemoOne = function DemoOne(props) {

    let { title, x, children } = props;

    // 要对children的类型做处理

    // 可以基于 React.Children 对象中提供的方法，对props.children做处理：count\forEach\map\toArray...

    // 好处：在这些方法的内部，已经对children的各种形式做了处理

    /* if (!children) {

        children = [];

    } else if (!Array.isArray(children)) {

        children = [children];

    } */

    children = React.Children.toArray(children);

    let headerSlot = [],

        footerSlot = [],

        defaultSlot = [];

    children.forEach(child => {

        // 传递进来的插槽信息，都是编译为virtualDOM后传递进来的「而不是传递的标签」

        let { slot } = child.props;

        if (slot === 'header') {

            headerSlot.push(child);

        } else if (slot === 'footer') {

            footerSlot.push(child);

        } else {

            defaultSlot.push(child);

        }

    });



    return <div className="demo-box">

        {headerSlot}

        <br />



        <h2 className="title">{title}</h2>

        <span>{x}</span>



        <br />

        {footerSlot}

    </div>;

};