微信截图_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>
