重学react——slot

一、插槽用法

（1）DOM方式

const Wrap1 = (props: any) => {
    return <div>
        {props.children}
    </div>;
};

<!-- 引用 -->
<Wrap1>
    我是孩子
</Wrap1>

(2) 对象方式

const Wrap2 = (props: any) => {
    return <div>
        {props.children.son}
        {props.children.daughter}
    </div>;
};
<!-- 引用 -->
<Wrap2>
    {{
        son: <div>我是儿子</div>,
        daughter: <div>我是女儿</div>
    }}
</Wrap2>

（3）函数方式

const Wrap3 = (props: any) => {
    const info = props.children;
    return <div>
        {info('lihaixing', 32)}
    </div>;
};

<!-- 引用 -->
<Wrap3>
    {
        (name: string, age: number) => {
            return <div>
                name: {name} <br/>
                age: {age}
            </div>;
        }
    }
</Wrap3>

系列

重学react——slot
重学react——state和生命周期
重学react——redux
重学react——hooks以及原理
重学react——context/reducer
重学react——router
重学react——高阶组件
build your own react
React——fiber