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.一定程度减少父子通信
 */
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容