如何自定义容器组件

假如我现在想自定义一个类似Form.Item的组件,可以让其作为容器组件,承包一部分逻辑.然后我包裹着的组件还能正常显示.

 

方案:关键函数React.cloneElement或者React.createElement.如果是直接填入组件而并非动态生成的,主要推荐React.cloneElement,具体两者的区别

         cloneElement:接收一个React元素,然后克隆一个一摸一样的(可直接接收一个自定义组件)

         createElement:三个参数,分别为元素类型、属性、子组件.

       关键属性:组件内部如果包裹了一个子元素,他的props里面会有一个children属性,其值为一个React元素

容器组件代码:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

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;