React ts父子组件通信

// 父组件

import PageModal from './PageModal'; // 引入子组件

{
      title: '操作',
      valueType: 'option',
      hideInSearch: true,
      render: (_, record) => [
        <Space>
          {
            <a key="particulars"
               onClick={() => {
                // 把表格当前行的 record 通过showModal方法传递给子组件
                 cRef.current?.showModal(record);
               }}
            >详情</a>
          }
        </Space>
      ]
}

const SysOrg: React.FC = () => {
  const cRef = useRef(null); // 创建ref
  return (
      <PageModal ref={cRef} />
  );
};
export default SysOrg;

// 子组件


import {useState,forwardRef,useImperativeHandle } from 'react';
import { Modal } from 'antd';

const PageModal = forwardRef((props, ref) => { // forwardRef 会创建一个React组件，这个组件能够将其接受的 ref 属性转发到其组件树下的另一个组件中

  useImperativeHandle(ref, () => ({ // useImperativeHandle 自定义暴露给父组件的实例值
    showModal: (record:any) => { // showModal 为暴露给父组件的方法
      setIsModalOpen(true); // showModal 执行时，将 isModalOpen 设置为 true
      console.log(record,'record')
    }
  }));


  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };


  return (
    <>
      <Modal title="详情" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </Modal>
    </>
  );
});

export default PageModal;

我这里使用的组件库是:

https://procomponents.ant.design