react hook下的hoc组件

Posted 2021-09-13 Alex_Max

假设我们有组件login和组件user，login组件内部有用户名密码输入，然后发送ajax请求给后端，后端返回成功，同时把用户list信息也返回了，然后直接把list当参数传给user组件。同时也显示user组件。
大概的调用方式就是

<Login>
   <User />
</Login>

interface ILoginProps {
    children: React.ReactElement;
}
const Login: FC<ILoginProps> = (props) => {
    const getChildNode = () => {
        if (props?.children) {
            const cloned: React.ReactElement = 
            React.cloneElement(props?.children, {
                initImInfo,
                initConfInfo,
                initUserInfo,
                isHost
            });
            return cloned;
        }
        return <div />;
    };
    return {isLoginSuccess ?getChildNode(): <LoginFrom>}
})

React.cloneElement的使用，它的第二个参数就是传给child的props.