如何自定义容器组件

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