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;

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

相关推荐
golang学习记几秒前
从0死磕全栈之Next.js 生产环境优化最佳实践
前端
Mintopia22 分钟前
🧠 Next.js 还是 Nuxt.js?——当 JavaScript 碰上命运的分叉路
前端·后端·全栈
5pace1 小时前
Mac Nginx安装、启动、简单命令(苍穹外卖、黑马点评前端环境搭建)
java·前端·nginx·macos·tomcat
Learn Beyond Limits1 小时前
如何在Mac进行Safari网页长截图?
前端·macos·safari·方法·操作·功能·开发者平台
阿珊和她的猫1 小时前
深入剖析 Vue Router History 路由刷新页面 404 问题:原因与解决之道
前端·javascript·vue.js
IT_陈寒2 小时前
Vue3性能提升30%的秘密:5个90%开发者不知道的组合式API优化技巧
前端·人工智能·后端
我是华为OD~HR~栗栗呀2 小时前
华为od-22届考研-C++面经
java·前端·c++·python·华为od·华为·面试
老黄编程2 小时前
FireFox如何滚动截屏?
前端·firefox
_殊途3 小时前
HTML-CSS项目练习
前端·css·html
@AfeiyuO3 小时前
el-table 表格嵌套表格
前端·elementui·vue