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