react——插槽

        插槽的使用，需要在组件标签内部组合jsx内心，进行传递，因为jsx本身就是一个js对象，插槽直接使用隐藏属性children直接渲染到页面，也可以是数组或者对象，通过索引或者属性实现具名插槽。

一、匿名插槽   

        当我们在引用组件的时候，还想在组件中额外显示其他内容，如，引用了<Sub></Sub>组件，想在此组建中额外加一个“我想要暴富”内容。可以直接<Sub><div>我想要暴富</div></Sub>,然后在组件中通过this.props.children来展示内容。children是props自带的一个影藏属性，当引用的组件中放入内容是，会自动被props中的children属性接收。

import React, { Component } from 'react'

export default class Solt extends Component {
    render() {
        return (
            <div>
                <Sub>
                    <div>我想暴富</div>
                </Sub>
            </div>
        )
    }
}
class Sub extends Component {
    render() {
        return (
            <div>子组件
                {this.props.children}

            </div>
        )
    }
}

二、具名插槽         

       1、 给插槽做标记，我们会在引用的组件中插入不知一段内容，可能是多段，但是插入的内容我们想按照自己的顺序排放，这时候可以给children加下标来实现，如，我想暴富，我想暴瘦，我想暴运，第一个意愿是我想暴瘦，类似于vue中的具名插槽。

import React, { Component } from 'react'

export default class Solt extends Component {
    render() {
        return (
            <div>
                <Sub>
                    <div>我想暴富</div>
                    <div>我想暴瘦</div>
                    <div>我想暴运</div>
                </Sub>
            </div>
        )
    }
}
class Sub extends Component {
    render() {
        return (
            <div>子组件
                {this.props.children[1]}
                {this.props.children[0]}
                {this.props.children[2]}

            </div>
        )
    }
}

 2、自己起名字，传一段内容，然后在想调用的地方调用

import React, { Component } from 'react'

export default class Solt extends Component {
    render() {
        return (
            <div>
                <Sub top={<p>我是展示在top的内容</p>} bottom={<p>我是展示在bottom的内容</p>}>
                    <div>我想暴富</div>
                    <div>我想暴瘦</div>
                    <div>我想暴运</div>
                </Sub>
            </div>
        )
    }
}
class Sub extends Component {
    render() {
        return (
            <div>子组件
                {this.props.top}
                {this.props.children[1]}
                {this.props.children[0]}
                {this.props.children[2]}
                {this.props.bottom}

            </div>
        )
    }
}

 

三、作用

1、为了复用，如轮播图

2、一定程度上减少父子通信，如果逻辑复杂会出现代码冗余