react插槽

单个插槽

假设有一个名为Box的子组件

...

    
123123

...
// 在子组件中
    ...
    render() {
        return (
            

                
xxx....
                {this.props.children}
            
 
        )
    }

    /** 输出
     * 
xxx....
     * 
123123
     */

多个插槽

在父级的子组件节点(...)中，写多个div 就是多个插槽，在子组件中，this.props.children 是一个数组，直接写this.props.children的话会把所有的插槽都放在节点上

...

    
123123
    
aaabbbccc

...
// 在子组件中
    ...
    render() {
        return (
            

                
xxx....
                {this.props.children}
            
 
        )
    }

    /** 输出
     * 
xxx....
     * 
123123
     * 
aaabbbccc
     */

因为this.props.children是一个数组，如果想要区分开，可以使用{this.props.children[0]}

    ...
    render() {
        return (
            

                
xxx....
                {this.props.children[1]}
            
 
        )
    }

    /** 输出
     * 
xxx....
     * 
aaabbbccc
     */

也可以将插入的div添加个标识符

...

    
111
    
222

...

我们会发现，组件中接收的值有ref和name属性(用别的属性也可以，在这里只是用ref和name举一个栗子)

在使用时候，可以直接输出this.props.children.filter(item => item.ref === 'content')就可以得到想要的了

注意事项

在插槽子组件中使用filter 时有一个坑，就是我们做组件时，插槽的位置是可填可不填的，而在react中如果只填写一个插槽的话，this.props.children 并不是一个数组，所以会导致filter 报错

可以在输出时写成这种方式：

...
{this.props.children && this.props.children.length ? this.props.children.filter(item => item.ref === 'content') : this.props.children}
...

个人博客