React 使用ref属性调用子组件方法(也可以适用于父子传参)

注意:①需使用hooks函数组件 ②使用了antDesign组件库(可不用)

如何使用

父组件代码

javascript 复制代码
import React, { useState, useRef, useEffect } from 'react';
import { Button } from 'antd';
import Child from './components/child';

export default () => {
  const childRef = useRef();

  //使用ref调用子组件的方法
  const handleOpen = () => {
    childRef.current.showModal('Hello word');
  };
  return (
    <div>
      <Button type="primary" onClick={handleOpen}>
        点我
      </Button>
      <Child ref={childRef} />
    </div>
  );
};

子组件代码

javascript 复制代码
import React, { useImperativeHandle, forwardRef, useState, useRef, useEffect } from 'react';
import { Modal } from 'antd';

const ChildComponent = forwardRef((props, ref) => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [data, setData] = useState('');

  //弹框打开
  const showModal = async (data) => {
    setIsModalOpen(true);
    setData(data);
  };
  //弹框确定
  const handleOk = async () => {
    setIsModalOpen(false);
  };
  //弹框取消
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  // 通过第二个参数ref来控制暴露哪些方法
  useImperativeHandle(ref, () => ({
    showModal,
  }));

  return (
    <div>
      <Modal title="子组件" width={800} open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
        <div>{data}</div>
      </Modal>
    </div>
  );
});

export default ChildComponent;

注:本人前端小白 ,如有不对的地方还请多多指教

相关推荐
然我2 小时前
防抖与节流:如何让频繁触发的函数 “慢下来”?
前端·javascript·html
鱼樱前端2 小时前
2025前端人一文看懂 Broadcast Channel API 通信指南
前端·vue.js
烛阴2 小时前
非空断言完全指南:解锁TypeScript/JavaScript的安全导航黑科技
前端·javascript
鱼樱前端2 小时前
2025前端人一文看懂 window.postMessage 通信
前端·vue.js
快乐点吧2 小时前
【前端】异步任务风控验证与轮询机制技术方案(通用笔记版)
前端·笔记
pe7er3 小时前
nuxtjs+git submodule的微前端有没有搞头
前端·设计模式·前端框架
七月的冰红茶3 小时前
【threejs】第一人称视角之八叉树碰撞检测
前端·threejs
爱掉发的小李3 小时前
前端开发中的输出问题
开发语言·前端·javascript
祝余呀4 小时前
HTML初学者第四天
前端·html
浮桥5 小时前
vue3实现pdf文件预览 - vue-pdf-embed
前端·vue.js·pdf