React的插槽solt

插槽(Portals)能将子节点渲染到父组件的 DOM 层次之外

import React, { Component } from 'react'
class Child extends Component {
    render() {
        return (
            <div>
                {this.props.children[2]}
                {this.props.children[1]}
                {this.props.children[0]}
            </div>
        )
    }
}
class Swiper extends Component {
    render() {
        return (
            <div>
                {this.props.children}
            </div>
        )
    }
}

export default class App extends Component {
    render() {
        return (
            <div>
                <Swiper><div>aaaaaa</div><div>bbbbbb</div><div>ccccc</div></Swiper>
                <Child>
                    <div>111111111</div>
                    <div>222222222</div>
                    <div>333333333</div>
                </Child>
            </div>
        )
    }
}

/**
 * 1.为了复用，
 * 2.一定程度减少父子通信
 */