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