假如咱们有组件 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.