插槽

单个插槽

• 子组件 ``jsx import React from "react"; import { PropTypes } from "prop-types"; import "./index.less"; const Title = (props) => { const { className, text, children } = props; return ( <div className={title-container Title- ${className}`}>

  <p className="text">{text}</p>
   {/* 此处是由父组件传过来的插槽 */}
  {children}

  ); };

// 规定props的数据类型 Title.propTypes = { className: PropTypes.string, text: PropTypes.string, children: PropTypes.array, };

Title.defaultProps = { className: “”, text: “预警信息展示”, children: [], };

export default Title;

- 父组件
```jsx
import React from "react";
import Title from "@/components/Title";
export default class LeftTop extends React.Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
  }
  render() {
    return (
      <div className="left-top-container">
        <Title>
           {/* 传入两个插槽内容 */}
          <div className="other">其余内容</div>
          <div className="other2">其余内容</div>
        </Title>
      </div>
    );
  }
}

• 效果

限定插槽

限制传入的子元素的展示位置

//这是一个数组 会直接把三个div直接显示在子组件中
{this.props.children}
//只是把这个children数组第一个元素放到子组件中
{this.props.children[0]}
//这是通过filter筛选出指定自定义属性的名称来放入到子组件中
{this.props.children.filter(itme => itme.props.name=="header")}

给组件限定 header main footer 三个位置的插槽

<Title>
     <div name="header">Hello World!</div>
     <div name="main">Hello World!</div>
     <div name="footer">Hello World!</div>
 </Title>