【react】antd 动态循环获取子组件ref

参考博客：[react] 在循环中获取子组件ref，父组件调用子组件的两种方法

父组件：

// 点击 create group 按钮后，对 formConfig 里面的字段进行校验
  const validConfigFields = async () => {
    const valid = await Promise.all(
      formConfig.current.map(async (r: any) => {
        const { getFieldsForm } = r;
        try {
          await getFieldsForm.validateFields();
        } catch (err) {
          return false;
        }
        return true;
      }),
    );
    return valid;
  };


// tabel-view
    {
      title: 'Options',
      dataIndex: 'options',
      key: 'options',
      render: (_value, record, index) => {
        const arr: ConfigType[] = [];
        if (record.config) {
          const obj = JSON.parse(record.config);
          Object.keys(obj)?.forEach((key) => {
            // && key !== 'period_time'
            if (key !== 'group_name' && key !== 'definition' && key !== 'update_cycle' && key !== 'period_time') {
              const item = {
                key,
                type: obj[key],
              };
              arr.push(item);
            }
          });
        }
        return (
          <FormConfig
            config={arr}
            onChange={(obj) => handleFormConfigChange(obj, record.id, index)}
            ref={(fref) => {
              if (fref) {
                formConfig.current[index] = fref;
              }
            }}
          />
        );
      },
    },

子组件：

// 暴露给父组件
  useImperativeHandle(ref, () => ({
    getFieldsForm: form,
  }));