// 点击 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,
  }));
 在交互式监视模式下启动测试运行器。 有关更多信息，请参见关于的部分。
npm run build
 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。
 生成被最小化，并且文件名包括哈希值。 您的应用已准备好进行部署！
 有关更多信息，请参见关于的部分。
npm run eject
 注意：这是单向操作。 eject ，您将无法返回！
 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从您的项目中删除单个生成依赖项。
 相反，它将所有配置文件和传递依赖项
在React中，很典型的父子组件通信方式就是使用props，当时在某些特殊的情况下，我们需要在典型数据流之外强制修改子组件。被修改的子组件可能是一个 React 组件的实例，也可能是一个 DOM 元素。为了更好的解决这个问题，React提供了解决的办法：ref。通过往组件或者dom元素上绑定ref属性，我们可以拿到此实例，以此来解决更多的事情！
关于ref的使用场景，react官方中，是这么说的：
1. 字符串形
				
import React, { useEffect, useState,useRef } from 'react';
import styles from './index.less';
const Address: React.FC<{}> = (props) => {
 const liRefList = useRef([]);
 const getRef=(dom)=>{
    liRefList.current.push(dom)
 useEffect(()=>
    const { list } = this.state;
    for (let item of list) {
        if (item.value && item.value.length > 100) {
          Toast.show(`${i.
				
使用场景：需要重复触发子组件弹窗或者需要在子组件修改值的时候可以采用调用子组件身上特定方法执行操作。
在次介绍一下最新hooks的操作和旧版本class组件调用方式
一.Hooks api调用方式
需要用到的Api:useRef useImperativeHandle forwardRef
简单说明：
1.useRef: 用于获取元素的原生DOM或者获取自定义组件所暴露出来的ref方法(父组件可以通过ref获取子组件，并调用相对应子组件中的方法)
2.useImperativeHandle:在函数式组件中，
				
要让一个父组件得到子组件的数据，需要通过props属性将子组件中的数据传递给父组件。
首先在子组件中创建一个函数，将需要传递的数据作为参数传入该函数。然后在父组件中定义一个函数，该函数会接收子组件传递的数据作为参数。在父组件中使用子组件时，将该函数以props的形式传递给子组件，然后在子组件中调用该函数并将需要传递的数据作为参数传递给该函数即可。
下面是一个示例代码：
```javascript
// 子组件
class ChildComponent extends React.Component {
  handleClick = () => {
    const data = '这是需要传递的数据';
    this.props.getData(data);
  render() {
    return (
      <button onClick={this.handleClick}>点击我</button>
// 父组件
class ParentComponent extends React.Component {
  getDataFromChild = (data) => {
    console.log('从子组件中获取到的数据：', data);
  render() {
    return (
      <ChildComponent getData={this.getDataFromChild} />
在这个示例中，子组件是一个按钮，点击该按钮会调用`handleClick`函数。在`handleClick`函数中，我们将需要传递的数据作为参数传递给父组件传递过来的`getData`函数。
在父组件中，我们定义了一个名为`getDataFromChild`的函数，该函数接收从子组件传递过来的数据作为参数，并将该数据打印到控制台中。在父组件的`render`函数中，我们将`getDataFromChild`函数以props的形式传递给子组件`ChildComponent`。
这样，当我们在子组件中点击按钮时，就会触发父组件中的`getDataFromChild`函数，并将子组件中传递的数据作为参数传递给该函数，从而实现了父组件获取子组件数据的目的。