如果子组件是antd form表单呢

如果子组件是 Ant Design 的 Form 表单组件，可以通过以下两种方式进行父子组件之间的通信：

1. 使用 React 的 Context API

使用 React 的 Context API 可以在父组件中定义一个 Context，然后在子组件中使用该 Context，从而实现父子组件之间的通信。

首先，在父组件中定义 Context：

import React, { createContext, useState } from 'react';
import { Form } from 'antd';

export const MyContext = createContext();

const ParentComponent = () => {
  const [form] = Form.useForm();
  const [data, setData] = useState({});

  const onFinish = (values) => {
    setData(values);
  };

  return (
    <MyContext.Provider value={{ data, form }}>
      <Form form={form} onFinish={onFinish}>
        {/* 子组件 */}
      </Form>
    </MyContext.Provider>
  );
};

export default ParentComponent;

然后，在子组件中使用该 Context：

import React, { useContext } from 'react';
import { MyContext } from './ParentComponent';

const ChildComponent = () => {
  const { data, form } = useContext(MyContext);

  return (
    <div>
      <p>{data.name}</p>
      <Form.Item label="Name" name="name">
        <Input />
      </Form.Item>
    </div>
  );
};

export default ChildComponent;

2. 将子组件作为函数组件传递给父组件

将子组件作为函数组件传递给父组件，可以在子组件中通过 props 获取父组件传递的 Form 实例，从而实现父子组件之间的通信。

首先，在父组件中将 Form 实例传递给子组件：

import React, { useState } from 'react';
import { Form } from 'antd';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const [form] = Form.useForm();
  const [data, setData] = useState({});

  const onFinish = (values) => {
    setData(values);
  };

  return (
    <Form form={form} onFinish={onFinish}>
      <ChildComponent form={form} data={data} />
    </Form>
  );
};

export default ParentComponent;

然后，在子组件中通过 props 获取 Form 实例：

import React from 'react';
import { Form, Input } from 'antd';

const ChildComponent = ({ form, data }) => {
  return (
    <div>
      <p>{data.name}</p>
      <Form.Item label="Name" name="name">
        <Input />
      </Form.Item>
    </div>
  );
};

export default ChildComponent;