如何在一个react组件中同时使用forwardRef和useRef

在一个子组件中,有一种场景是子组件用forwardRef包了一层,传到子组件的outerRef需要绑定到子组件上,而与此同时,子组件内部也有一个通过useRef创建的innerRef,也需要绑定到子组件上,咋办呢?我做了几次尝试,如果你想直接参考成功的尝试,请跳转

尝试一

如果是两个useRef,可以这样绑定:

jsx 复制代码
const ref1 = useRef(null);
const ref2 = useRef(null);

return (
    <div ref={(el) => {ref1(el); ref2(el)}}>
        ...
    </div>
);

可是这是forwardedRef,我试了之后不成功。

尝试二

写一个mergeRefs方法:

jsx 复制代码
const mergeRefs = (...refs) => {
    return node => {
      for (const ref of refs) {
        ref.current = node
      }
    }
}

return(
    <div ref={mergeRefs(ref1, ref2)}>
        ...
    </div>
);

对于简单的情景,这样也可以,但我的场景还是不work。

尝试三

也就是优化mergeRefs方法,当ref是个function时,则调用上一个ref:

jsx 复制代码
const setRef = (node, ...refs) => {
    refs.forEach((ref) => {
      if (typeof ref === 'function') {
        ref(node);
      } else if (ref != null) {
        ref.current = node;
      }
    });
}

const mergeRefs = (...refs) => {
    return node => {
      setRef(node, ...refs);
    }
}

return(
    <div ref={mergeRefs(innerRef, forwardedRef)}>
        ...
    </div>
);

成功啦!

结尾

我是在开发带动画效果的draggable list时遇到的这个问题,每一个list item既是droppable的,要绑定dropRef,又是draggable的,要绑定dragRef,又需要从父组件那接收forwardedRef,通过以上第三个尝试,我就可以实现多重功能啦。如果你对这个draggable list感兴趣,可以参考这篇文章:《用react-dnd和react-flip-move做一个带动画的draggable list》

相关推荐
gnip1 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫2 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel3 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼3 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手7 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法7 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku7 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode7 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu7 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu7 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript