需求：

有一个组件中有两个ref，一个f是orwardRef暴露出的ref，另一个是内部维护的ref

如何将这个两个ref都赋到一个element上？

const Element = forwardRef((props, ref) => {const insiderRef = useRef(null);return (<div></div>)
})

解决方案：

ref可以接收一个回调函数，这个回调函数在组件挂载或者卸载的时候被调用，函数参数为组件实例或DOM元素。

可以利用此机制，实现一个函数为两个ref赋值。

hooks实现如下：

import { MutableRefObject, Ref, useMemo } from 'react';function setRef<T>(ref: MutableRefObject<T | null> | ((instance: T | null) => void) | null | undefined,value: T | null,
): void {if (typeof ref === 'function') {ref(value);} else if (ref) {ref.current = value;}
}export default function useForkRef<InstanceA, InstanceB>(refA: Ref<InstanceA> | null | undefined,refB: Ref<InstanceB> | null | undefined,
): Ref<InstanceA & InstanceB> | null {/*** This will create a new function if the ref props change and are defined.* This means react will call the old forkRef with `null` and the new forkRef* with the ref. Cleanup naturally emerges from this behavior.*/return useMemo(() => {if (refA == null && refB == null) {return null;}return (refValue) => {setRef(refA, refValue);setRef(refB, refValue);};}, [refA, refB]);
}

React 将多个ref同时赋给一个element相关推荐

React基础（2）—— React函数式组件使用ref
React函数式组件使用ref ref ref的作用 ref用于获取DOM元素或子组件实例. useRef useRef作用 useRef用于返回一个可变的ref对象.这个refduix的curren ...
构建一个react项目_您想要了解更多有关React的内容吗？让我们构建一个游戏，然后玩。...
构建一个react项目 by Samer Buna 通过Samer Buna 您想要了解更多有关React的内容吗? 让我们构建一个游戏,然后玩. (Do you want to learn more ...
adoquery查询结果如何赋给一个变量(delphi和c++ builder)
我用的是adoquery进行数据库查询,但是我不想把查询的结果显示出来,只是想赋给一个变量,请问我这个变量该怎样去设置呢 ? 回复人:sunriver 回复时间:2005-6-3 9:11:00 p ...
c语言如何用fscanf将字符串读取,在c语言中如何将文本内容赋给一个字符串
在c语言中如何将文本内容赋给一个字符串来源:互联网宽屏版评论 2009-08-13 04:59:12 分类: 电脑/网络 >> 程序设计 >> 其他编程语言问题 ...
[react] 怎样将多个组件嵌入到一个组件中？
[react] 怎样将多个组件嵌入到一个组件中? import A from '/*' 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣 ...
mysql substring函数截取值后赋给一个declare变量
今天写的一个mysql存储过程涉及到对一个传入参数的字符串截取,然后需要判断截取字符串进行一系列操作,最开始用select subtring() into 这样的方法将截取值赋于declare变量直 ...
2.8 将一个整型变量的值赋给一个布尔型变量，再将这个布尔型变量的值赋给一个整型变量，得到的值是多少？
试题描述将一个整型变量的值赋给一个布尔型变量,再将这个布尔型变量的值赋给一个整型变量,得到的值是多少? 输入格式一个整型范围内的整数,即初始时整型变量的值. 输出格式一个整数,经过上述过程后得到 ...
react.js 给标识ref，获取内容
import React,{Component} from 'react' import ReactDOM from 'react-dom' class App extends Component{ ...
TypeScript与React中如何使用ref
父组件在父组件中,编写如下: 类中定义child,用于存放子组件的作用域 public child: any;Copy to clipboardErrorCopied 绑定子组件作用域 public ...

React 将多个ref同时赋给一个element

需求：

解决方案：

hooks实现如下：

React 将多个ref同时赋给一个element相关推荐

最新文章

热门文章