前情

公司前端主技术栈是react系,最近在提取组件的时候想到vue可以通过ref获取子组件,再调用子组件的方法,于是想在react中实现同样效果。

实现原理

父组件调用useRef获取ref对象,再通过属性把ref对象传入子组件,子组件通过useImperativeHandle向外暴露方法给父组件调用

useRef – React 中文文档

useImperativeHandle – React 中文文档

关键代码

父组件

import { useRef } from 'react';
import Child from './child'; export default function Father() {
const childRef = useRef();
const childAction = () => {
//updateChildText 就是子组件暴露给父组件的方法
childRef.current && childRef.current.updateChildText ('父组件调用子组件方法');
} return (
<div>
{/* 此处注意需要将childRef通过props属性从父组件中传给自己 cRef={childRef} */}
<Child cRef={childRef}/>
<button onClick={childAction}>触发子组件方法</button>
</div>
) }

子组件

//这个为子组件
import {useState, useImperativeHandle, useState} from 'react'; export default function Child({cRef}) {
const [text, setText] = '我是子组件'
const updateChildText = (str) => {
setText(str);
} //useImperativeHandle(ref, createHandle, [deps])
useImperativeHandle(cRef,() => ({
//test即为子组件暴露给父组件的方法
updateChildText
})) return (
<div>{text}</div>
)
}

React使用useRef调用子组件方法的更多相关文章

  1. React Hooks中父组件中调用子组件方法

    React Hooks中父组件中调用子组件方法 使用到的hooks-- useImperativeHandle,useRef /* child子组件 */ // https://reactjs.org ...

  2. react 父组件调用子组件方法

    import React from 'react'import '../page1/header.css'import { Table } from 'antd'import Child from ' ...

  3. React父组件如何调用子组件方法,访问子组件State

    /** * * Author: shujun * Date: 2020-10-25 */ import React from 'react'; import {message} from 'antd' ...

  4. react hooks组件父组件调用子组件方法

    函数组件父组件调用子组件方法需要使用 useImperativeHandle 和 forwardRef 两个方法 1.子组件 2.父组件 注意:一定要使用ref来接从子组件传过来的实例值,用其他的在函 ...

  5. Angular组件——父组件调用子组件方法

    viewChild装饰器. 父组件的模版和控制器里调用子组件的API. 1.创建一个子组件child1里面只有一个greeting方法供父组件调用. import { Component, OnIni ...

  6. vue 父组件调用子组件方法

    情景: 父组件中引入上传附件的子组件:点击组件可以分别上传对应要求的图片,子组件内部循环可创建多个模块. 父组件传入数组子组件循环来创建不同的组件模块,所有事件都在子组件内部. 父组件页面的上方同时有 ...

  7. Vue 父组件循环使用refs调用子组件方法出现undefined的问题

    Vue 父组件循环使用refs调用子组件方法出现undefined的问题 1. 背景 最近前端项目遇到一个问题,我在父组件中使用了两个相同的子组件child,分别设置ref为add和update.其中 ...

  8. vue父组件调用子组件方法、父组件向子组件传值、子组件向父组件传值

      一.父组件调用子组件方法 父组件代码  parent.vue <template> <div> <button @click="parentFun" ...

  9. vue:父子组件间通信,父组件调用子组件方法进行校验子组件的表单

    参考: ElementUI多个子组件表单的校验管理:https://www.jianshu.com/p/541d8b18cf95 Vue 子组件调用父组件方法总结:https://juejin.im/ ...

  10. 在业务逻辑中,经常会有父组件调用子组件方法的情况,vue2.0 和 vue3.0 的使用中有些不一样,在这里总结下。

    在业务逻辑中,经常会有父组件调用子组件方法的情况,vue2.0 和 vue3.0 的使用中有些不一样,在这里总结下. vue2.0 中的使用方法 父组件: <template> <d ...

随机推荐

  1. JavaScript——事件监听

    事件监听      1.事件绑定        2.常见事件     

  2. 反问面试官3个ThreadLocal的问题

    ThreadLocal,一个Java人面试绕不开的话题,我也很奇怪为什么那些面试官很喜欢问这个,也不知道他们自己有没有搞清楚. 接下来,我想先说说ThreadLocal的用法和使用场景,然后反问面试官 ...

  3. Swift查看变量内存地址

    withUnsafePointer 不说话,先放代码 withUnsafeBufferPointer(to: a) { point in let address = UnsafeRawPointer( ...

  4. 6How To Use Messages With Flask - Flask Fridays #6 10:43

    消息闪现  消息闪现 {% for message in get_flashed_messages() %} <div class="alert alert-success alert ...

  5. 非常非常好用的一款账户密码保存工具-KeePass

      非常非常好用的一款账户密码保存工具 下载地址: https://sourceforge.net/projects/keepass/files/KeePass%202.x/2.55/KeePass- ...

  6. 《Spring Data JPA从入门到精通》内容简介、前言

    内容简介 本书以Spring Boot为技术基础,从入门到精通,由浅入深地介绍Spring Data JPA的使用.有语法,有实践,有原理剖析. 本书分为12章,内容包括整体认识JPA.JPA基础查询 ...

  7. LeetCode 1349. 参加考试的最大学生数 (状压DP 或 二分图最大独立子集)

    给你一个 m * n 的矩阵 seats 表示教室中的座位分布.如果座位是坏的(不可用),就用 '#' 表示:否则,用 '.' 表示. 学生可以看到左侧.右侧.左上.右上这四个方向上紧邻他的学生的答卷 ...

  8. union联合体的缺陷

    传统的 union 联合体在 C++ 中虽然提供了一种能够在相同的内存空间内存储多种不同类型的方式,但它也有一些显著的缺陷和限制.这些缺陷让 union 的使用不太安全,尤其是在复杂的程序中.以下是传 ...

  9. ftrace irqs跟踪器

    当中断被关闭(俗称关中断)了,CPU就不能响应其他的事件,如果这时有一个鼠标中断,要在下一次开中断时才能响应这个鼠标中断,这段延迟称为中断延迟.向current_tracer 文件写入 irqsoff ...

  10. 现代化 React UI 库:Material-UI 详解!

    随着 React 在前端开发中的流行,越来越多的 UI 框架和库开始涌现,以帮助开发者更高效地构建现代化.响应式的用户界面.其中,Material-UI 是基于 Google Material Des ...