React hooks useRef 用法

最新推荐文章于 2024-06-07 11:01:41 发布
最新推荐文章于 2024-06-07 11:01:41 发布
阅读量605 收藏 2
点赞数
文章标签： react.js javascript ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40137978/article/details/126039311
版权

一、父组件使用 useRef 创建一个ref 传入子组件

在这里插入图片描述

二、子组件接收 ref ，此时用到 forwardRef

在这里插入图片描述
ref作为第二个参数传入。

三、在子组件中将想要给父组件调用的方法通过 useImperativeHandle 暴漏出来。

在这里插入图片描述

四、在父组件中使用 useRef 返回一个可变的 ref 对象 ，其 current 属性被初始化为传入的参数，可以直接使用。

在这里插入图片描述

这里可以看到，子组件暴漏的方法已经挂载到了ref的.current 属性中

官网说：useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。 先不管这些，把子组件中ref打印出来看看再说

wx-18538561085
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react-hooks 使用 useRef来实现 父组件调用子组件的方法
weixin_45868552的博客
07-23 1482
一、首先写子组件，在子组件中将方法创建好 //这个为子组件 import {useState, useImperativeHandle} from 'react' export default function Child({cRef}) { //useImperativeHandle(ref, createHandle, [deps]) //useImperativeHandle 可以让你在使用 ref 时自定义暴露给父组件的实例值 useImperativeHandl
React-hooks中useRef的用处(重：父子之间传值)
weixin_45315794的博客
01-10 2004
React-hooks中useRef的用处(重：父子之间传值) 在hooks中useRef的用处是有很多的，不仅仅只是操作dom元素而已，还有其他，例如组件之间的通信、设置定时器，存储数据等。 1、操作DOM元素 在hooks中useRef与普通React 中提供的creatRef方法是类似的，通过selfRef.current，操作dom元素内的属性及属性值。 const getRefVal = ()=>{ console.log("divRef",divRef) } 2、父子之间的通信
ReactHook之forwardRef和useInperativeHandle
最新发布
weixin_56048772的博客
06-07 461
这样就可以接受ref作为第二个参数。不然就只有props这一个参数。如果你的函数组件想要接受别人传来的ref参数，就必须把函数组件用。直接通过将ref传参到函数子组件，报错！【注】: 类组件是不需要的，可以直接传。会把别人传给你的ref帮你传进来。控制台报错，说函数组件不能接受。，但是一个函数组件找不到这个。【案例】：聚焦文本输入框。
useRef
m0_37557930的博客
06-08 258
1、访问 DOM 节点 import { useRef } from 'react' export default () => { const inputElement = useRef(null) const handleClick = () => { inputElement.current.focus() } return { <> <input ref={i
React Hooks之useRef详解
RayShyy的博客
02-18 5470
useRef 返回一个可变的 ref 对象，其内部只有一个 current 属性被初始化为传入的参数（initialValue）useRef 返回的 ref 对象在组件的整个生命周期内持续存在更新 current 值时并不会触发页面的重新渲染（re-render）useRef 会在每次渲染时返回同一个 ref 对象本质上，useRef 就像是可以在其 .current 属性中保存一个可变值的“盒子”。
react子组件如何传递函数到父组件执行
奔跑的小猪仔
06-08 242
【代码】react子组件如何传递函数到父组件执行。
React子组件传递给父组件的方法
wu_xiao_qing的博客
06-25 4481
1)redux状态管理2)通过refs传递,代码如下所示：3)通过毁掉函数传递，代码如下：父组件 &lt;AddModal onOk={(score: any, review: any) =&gt; this.handleOk(score, review) as any} onCancel={this.hideModal as any} ...
react的hooks的用法详解
10-14
React Hooks 是 React 16.8 版本引入的一个重大特性，它允许在不编写类组件的情况下使用状态和生命周期方法。Hooks 的引入显著简化了React组件的编写，提高了代码的可读性和可维护性。 首先，`useState` 是React ...
awesome-react-hooks：关于React Hooks的精选列表
01-31
React Hooks 是React 16.8版本引入的一个重大特性，它彻底改变了React组件的编写方式，使得在函数组件中也能使用状态和其他React生命周期方法。"awesome-react-hooks" 是一个精心整理的React Hooks资源列表，旨在为...
react-hooks-demo：此应用程序演示了React 16.8 Hooks的用法以及有关其各种用例的注释
02-14
该应用程序演示了React 16.8 Hooks的用法。 您可以找到同时使用类和钩子编写的应用程序逻辑，从而可以帮助您比较和关联它们。 语境 挂钩是使您能够“挂钩”功能组件中的React状态和生命周期功能的函数。 – React...
react-painter:基于 React Hooks + Canvas 的在线绘图APP
08-04
1. React Hooks：深入理解 useState、useEffect、useRef 等核心 Hooks。 2. Canvas API：熟悉基本的绘图操作，如路径绘制、形状绘制、渐变和阴影等。 3. React 组件生命周期和状态管理。 4. ES6+ 语法，包括箭头函数...
react-实现撤消和重做功能的ReactHooks
08-15
React Hooks的引入使得在不使用类组件的情况下也能轻松实现这些高级功能。本篇文章将深入探讨如何利用React Hooks来实现撤消和重做机制。 首先，我们需要了解React Hooks的基本概念。React Hooks 是在React 16.8...
React Hooks之UseRef ForwardRef useImperativeHandle父子组件通信
BUG_CONQUEROR_LI的博客
07-23 1168
React Hooks之UseRef ForwardRef useImperativeHandle父子组件通信
React 父组件获取子组件的方法/数据（useRef
weixin_43375908的博客
11-22 6389
帮同事debug发现的问题，记录一下， 弗曼学习大法好 interface RefFunType { hdlUpdate(): void, name: string } 父组件使用useRef useRef<RefFunType>() 传入的泛型是子组件存放在ref.current中的数据格式， （如果子组件内部绑定了自己的ref，那用的泛型为useRef ref是绑定在自定义组件上，子组件直接从props中获取ref是获取不到的， 这是因为ref不是prop属性，会像key
React ref & useRef 完全指南
前端进阶之路 | 中大厂、外企、国企内推 | 面试培训 | 简历修改
03-28 2364
在这篇文章中，你将学习如何使用React.useRef()钩子来创建持久的可变值(也称为references或refs)，以及访问DOM元素。 我们将从下面几点讲解： 1. 可变值 - 1.1用例:记录按钮点击 - 1.2用例:实现秒表 2. 访问DOM元素 - 2.1用例:聚焦输入 3.更新引用限制 4. 总结 可变值 useRef(initialValue)接受一个参数(引用的初始值)并返回一个引用(也称为ref)。引用只是一个具有特殊属性current的对象: const reference .
react跨组件传参(ts)
珎珎啊
10-08 1119
react跨组件传值，子传父，父传子
react-hook useRef 使用（useImperativeHandle）父组件调用子组件函数
Z_Wonderful的博客
06-14 1106
react-hook useRef 使用（useImperativeHandle）父组件调用子组件函数
React Hooks中父组件中调用子组件方法
SunnyQK的博客
09-27 1万+
React Hooks中父组件中调用子组件方法 场景： 在使用antd的Table组件时，对Table子组件进行了二次封装（<AsyncTable />）;在父组件（<f-comp />）中需要调用<AsyncTable />中的一个 函数，对antd原生Table上的dataSouce进行更新。所以，需要子组件中暴露一个函数供父组件调用，可以实时的去对子...
react中useRef详细总结
热门推荐
aliven1的博客
09-17 1万+
一、什么是useRef const refContainer = useRef(initialValue); 1 返回一个可变的 ref 对象，该对象只有个 current 属性，初始值为传入的参数( initialValue )。返回的 ref 对象在组件的整个生命周期内保持不变当更新 current 值时并不会 re-render ，这是与 useState 不同的地方更新 useRef 是 side effect (副作用)，所以一般写在 useEffect 或 event handler 里us
react-hooks 从入门到精通
11-02
使用React Hooks需遵循一定的规则，确保其正确执行。" React Hooks 的核心概念包括： 1. useState：这是React Hooks中最基础的状态管理工具，它允许函数组件拥有自己的状态，并且可以更新这个状态。通过调用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值