react函数组件父子通讯

文章目录

父组件

import React, { useRef } from "react";
import { Button } from "antd";
import Child from "./Child";

const Parent =()=> {
  const child = useRef(null);
  return (
    <div className="container">
      <Button onClick={()=>child.current.show()}>Open</Button>
      <Child ref={child}></Child>
    </div>
  );
}

export default Parent;

子组件

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

const Child = forwardRef((props, ref) => {
    useImperativeHandle(ref, () => ({
      show
    }))
    const [isModalVisible, setIsModalVisible] = useState(false);

    const show = () => {
      setIsModalVisible(true);
    };

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

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

    return (
        <Modal title="test" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
          <p>test</p>
        </Modal>
    );
  });

export default Child;