React中如何运用类似Vue中的slot分发组件？

微信截图_20180310142617.png

在vue中，我们使用slot分发，来完成可组合组件，类似一个组件中有多个插槽，需要用哪些功能，就插入需要的功能。

在React叫做可组合组件，那么在React中如何实现？
1.需要在组件中，将props中的值出来解构出来。

//这两者作用完全等价
const { children, tabNameLeft, tabNameRight } = this.props;//es6解构语法

2.在组件中，需要改变的地方加上{children}

 {children}
    <NavUl>
        <div>{tabNameLeft}</div>
        <div>{tabNameRight}</div>
    </NavUl>

组件代码：

public render() {
const { children, tabNameLeft, tabNameRight } = this.props;
    return (
        {children}
        <NavUl>
            {tabNameLeft !== "" &&
                <NavLi>
                    <NavLiDiv>
                        <Link to="/digital-museum" style={
                            this.tabStyle
                        }>{tabNameLeft}</Link>
                    </NavLiDiv>
                </NavLi>}
            {tabNameRight !== "" &&
                <NavLi>
                    <NavLiDiv>
                        <Link to="/quaternity" style={
                            this.tabStyle
                        }>{tabNameRight}</Link>
                    </NavLiDiv>
                </NavLi>
            }
        </NavUl>
    )
}

3.使用组件的地方，将你需要传入的值传进你定义好的参数即可实现slot

<Header tabNameLeft={"A"} tabNameRight={""} ></Header>