06.实现插槽

实战——插槽处理

概念

见下图


目的：复用性

我们已经知道了如何把子组件放入父组件，但如果有多个子组件要传入父组件又该如何完成呢？

因为子组件传入父组件是对象，于是我们可以把它转换为数组形式，以此达到目的

多个子组件放入父组件

// src\views\DemoOne.js
//父组件的写法
import PropTypes from "prop-types";
const DemoOne = function DemoOne(props) {
  let { title, x, children } = props;//取出属性
  //检测children是否存在，若不存在则赋值为空数组，若存在则检测是否为数组，若不是则转换为数组
  if (!children) {
    children = [];
  } else if (!Array.isArray(children)) {
    children = [children];
  }
  return (
    <div className="demo-box">
      {children[0]}
      <br />

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

      <br />
      {children[1]}
    </div>
  );
};

/* 设置属性的校验规则 */
DemoOne.defaultProps = {
  x: 0,
};
DemoOne.propTypes = {
  title: PropTypes.string.isRequired,
  x: PropTypes.number,
};

export default DemoOne;

//调用src\index.jsx
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 title="REACT好好玩哦" x={10}>
            <span>哈哈哈哈</span>
            <span>你好</span>
        </DemoOne>

         <DemoOne title="哇卡卡卡">
            <span>嘿嘿嘿</span>
        </DemoOne>

        <DemoOne title="哈哈哈哈哈" />
    </>
);

React.Children 对象

但其实我们并不需要自己写对子组件的校验，React有自己的方法。

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

开始时，我们会import React，React其实就是一个封装好的对象。

//也就是
children = React.Children.toArray(children);
//这里直接替换下面代码就能实现，于是就不放完整代码了
  if (!children) {
    children = [];
  } else if (!Array.isArray(children)) {
    children = [children];
  }

具名插槽

当我们要求将子组件放到我们需要的位置时，就可以使用具名组件

于是修改后的父组件代码是

// src\views\DemoOne.js    另一个文件没变
import PropTypes from "prop-types";
import React from "react";

const DemoOne = function DemoOne(props) {
  let { title, x, children } = props;
  children = React.Children.toArray(children);
  let headerSlot = [],
    footerSlot = [],
    defaultSlot = [];
  children.forEach((child) => {
    // 传递进来的插槽信息，都是编译为virtualDOM后传递进来的「而不是传递的标签」
    let { slot } = child.props; //获取插槽的名称
    //根据插槽的名称，把当前的插槽信息存放到对应的数组中,slot和对应的值，都可以自定义，要方便调用者。
    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>
  );
};
/* 设置属性的校验规则 */
DemoOne.defaultProps = {
  x: 0,
};
DemoOne.propTypes = {
  title: PropTypes.string.isRequired,
  x: PropTypes.number,
};

export default DemoOne;

对应的index.jsx,实验一下

//调用src\index.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import DemoOne from '@/views/DemoOne';

const root = ReactDOM.createRoot(document.getElementById('root'));

//因为有插槽我们传入chilren组件时，不需要考虑顺序，名字对应就行。
root.render(
    <>
        <DemoOne title="REACT好好玩哦" x={10}>
            <span slot="footer">我是页脚</span>
            <span>哈哈哈哈</span>
            <span slot="header">我是页眉</span>
        </DemoOne>

         <DemoOne title="哇卡卡卡">
            <span>嘿嘿嘿</span>
        </DemoOne>

        <DemoOne title="哈哈哈哈哈" />
    </>
);

---

待规整部分

实现具名插槽

// index.jsx
root.render(
  <>
    <FunctionComponent>
      <div className='slot-box' slot="head">
        我是插槽信息1
      </div>
      <div className='slot-box' slot="foot">
        我是插槽信息2
      </div>
    </FunctionComponent>
  </>
);
// views/FunctionComponent.jsx
import React from "react";
const FunctionComponent = function FunctionComponent(props) {
    let children = React.Children.toArray(props.children),
        headSlots = children.filter(item => item.props.slot === 'head'),
        footSlots = children.filter(item => item.props.slot === 'foot');
    return <div>
        {headSlots}
        我是组件内容
        {footSlots}
    </div>;
};
export default FunctionComponent;