Sui Move 前端共学笔记（七）-slot(插槽)

HOH水分子社区，是一个专注于编程、教育和创新的社区。

先看一段代码：

class APP extends Component {
    render() {
        return (
            <div>
                <Child>
                    <div>1112</div>
                    <div>1112</div>
                    <div>1112</div>
                </Child>
            </div>
        );
    }
}

class Child extends Component {
    render(){
        return (
            <div>
                hello
            </div>
        )
    }
}

此时，效果如下：

可以看到，页面在渲染时，并没有渲染Child标签内的内容，可以确定，当组件在渲染时，标签内的内容，会被组件内容覆盖，此时如果我们的需求要渲染Child标签内的内容，可以使用React中提供的特殊属性children，修改代码如下。

class Child extends Component {
    render(){
        return (
            <div>
                hello
                {this.props.children}
            </div>
        )
    }
}

除了div标签，我们还可以任意传入其他任意标签比如图片。

class APP extends Component {
    render() {
        return (
            <div>
                <Child>
                    <div>1112</div>
                    <div>1112</div>
                    <div>1112</div>
                    <img src={"https://ts3.cn.mm.bing.net/th?id=ODLS.f8df3b32-cd9c-44e4-805e-59a6ef600bb6&w=32&h=32&qlt=90&pcl=fffffa&o=6&pid=1.2"} alt={"xtjj"}/>
                </Child>
            </div>
        );
    }
}

我们也可以在Child组件内，通过索引改变显示的顺序：

class Child extends Component {
    render(){
        return (
            <div>
                hello
                {this.props.children[2]}
                {this.props.children[3]}
                {this.props.children[0]}
                {this.props.children[1]}
            </div>
        )
    }
}

Child组件中的this.props.children此时就像是一个可拓展的插槽，这个特性在组件复用中有极大用途，如轮播图需求我们可以在child中定义好轮播的功能，而不用关心具体轮播内容是什么类型，只要在轮播的地方定义好插槽即可。

Contact US