知识与经验,探索和发现(贰)

2022/03/21 知识与经验,探索和发现 本文共1710字,阅读全文约需6分钟 本文总阅读量

谷雨

截止 2022.05.21【计划】

Knowledge and Experience

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);

Exploration and Discovery

经济学

MySQL 实战

Search

    欢迎与我交流

    江南逰子

    Table of Contents