假如我现在想自定义一个类似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;