大佬教程收集整理的这篇文章主要介绍了如何自定义容器组件，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
假如我现在想自定义一个类似Form.Item的组件,可以让其作为容器组件,承包一部分逻辑.然后我包裹着的组件还能正常显示.
方案:关键函数React.cloneElement或者React.createElement.如果是直接填入组件而并非动态生成的,主要推荐React.cloneElement,具体两者的区别
cloneElement:接收一个React元素,然后克隆一个一摸一样的(可直接接收一个自定义组件)
createElement:三个参数,分别为元素类型、属性、子组件.
关键属性:组件内部如果包裹了一个子元素,他的props里面会有一个children属性,其值为一个React元素
容器组件代码:
const Smodel = (props, ref) => {
const childRef = useRef();
useEffect(() => {
const {
children
} = props;
setState({
Children: children,
});
}, [props, ref]);
return (
<div className={styles.modalBox}>
<Modal
>
{state.Children ? (
<div className={styles.modelForm}>
{React.cloneElement(state.Children, {
ref: childRef,
})}
</div>
) : null}
</Modal>
</div>
);
};
export default Smodel;
以上是大佬教程为你收集整理的如何自定义容器组件全部内容，希望文章能够帮你解决如何自定义容器组件所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。