const CustomComponent = (props, ref) => {
  const [ArrConfig, setArrConfig] = useState([]);
  const MaxKey = useRef(-1);
  const refs = useRef({}); // using useRef because we want to persist the values when component re-renders

  useImperativeHandle(ref, () => ({
    refs,
  }));

  // 用户动态创建
  const add = () => {
    // 随便模拟一下，key值一版是自增的
    setArrConfig([...ArrConfig, { key: (MaxKey.current += 1) }]);
  };

  const setRefs = (ele: HTMLElement, key: number) => {
    if (ele) {
      // 当map开始遍历后就会调用，因为ref回调函数是以内联函数的方式定义的，所以更新过程中会执行两次。一次参数是null，一次是dom元素，所以需要if判断
      refs.current[`form_${key}`] = ele;
    }
  };

  return (
    <div className='card'>
      {ArrConfig.map(({ key }) => (
        <DynamicRenderItemForm
          key={key}
          ref={(ele: HTMLElement) => setRefs(ele, key)}
        />
      ))}
    </div>
  );
};

export default forwardRef(CustomComponent);