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;

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

相关推荐
yangzhi_emo13 分钟前
ES6笔记5
前端·笔记·es6
Hexene...1 小时前
【前端Vue】el-dialog关闭后黑色遮罩依然存在如何解决?
前端·javascript·vue.js·elementui·前端框架
Jay_See1 小时前
JC链客云——项目过程中获得的知识、遇到的问题及解决
前端·javascript·vue.js
普通码农1 小时前
Element Plus 数字输入框箭头隐藏方案
前端
草字2 小时前
css flex布局,设置flex-wrap:wrap换行后,如何保证子节点被内容撑高后,每一行的子节点高度一致。
前端·javascript·css
Slice_cy2 小时前
深入剖析Vue框架:实现精简的computed
前端
局i2 小时前
ES6 类与继承:现代 JavaScript 面向对象编程
前端·javascript·es6
白菜上路2 小时前
C# Web API Mapster基本使用
前端·c#
叫我詹躲躲2 小时前
偷偷收藏!前端老鸟绝不外传的150个JS插件,让你效率翻3倍…
前端·vue.js
会豪2 小时前
如何让自己的前端项目更优雅
前端