亲宝软件园·资讯

展开

React Hook-useForkRe

明里人 人气:0

开篇

使用过 React 技术栈的同学相信都使用过 ref 传递给 render 中的元素,而在使用 React 封装组件时,会有这样一个场景:

组件将 props.children 作为 render 内容;组件内部会创建 ref 绑定到 props.children 上。

我们知道,元素上只能绑定一个 ref 属性引用,但对于上面这个场景,props.children 上可能已经存在一个 ref 属性,而组件内部定义的 ref 也会绑定到 props.children 上。
我们要想一种方式,将两者的 ref 都可以生效于元素上。

思路

首先我们回顾一下 React 创建 ref 的方式:

综合考虑,既然 回调 Refs 允许我们传递一个函数,并且接收元素实例作为这个函数的参数,那我们就可以定义一个这样的函数,在函数内编写我们的逻辑来处理 多个 ref 绑定元素实例的场景。(函数的灵活性)

实现

上代码:

function forkRef(refA, refB) {
  return refValue => {
    setRef(refA, refValue);
    setRef(refB, refValue);
  };
}

function setRef(ref, value) {
  if (typeof ref === 'function') {
    ref(value);
  } else if (ref) {
    ref.current = value;
  }
}

在 setRef 中会针对创建 ref 的方式做不同处理,比如:React.createRef 和 React.useRef 创建的 ref 是一个具有 current 属性的对象。

使用:

const nodeRef = React.useRef(null); // 组件内部的 ref

const handleRef = forkRef(props.children.ref, nodeRef);

const childrenProps = { ref: handleRef };

return React.cloneElement(children, childrenProps);

自定义 Hook - useForkRef

在 Hook 函数组件中,我们可以借助于 React.memo() 优化一下 forkRef() 的逻辑,避免每次组件更新时都创建一个新的闭包函数。
下面我们使用 TS 编写一个 useForkRef:

import * as React from 'react';

interface MutableRefObject<T> {
  current: T;
}

type Ref<T> = ((instance: T | null) => void) | MutableRefObject<T> | null;

export function setRef(ref: Ref<unknown>, value: unknown) {
  if (typeof ref === 'function') {
    ref(value);
  } else if (ref) {
    ref.current = value;
  }
}

export default function useForkRef(refA: Ref<unknown>, refB: Ref<unknown>) {
  return React.useMemo(() => {
    if (refA == null && refB == null) {
      return null;
    }
    return (refValue: unknown) => {
      setRef(refA, refValue);
      setRef(refB, refValue);
    };
  }, [refA, refB]);
}

使用:

const nodeRef = React.useRef<HTMLElement>(null); // 组件内部的 ref
const handleRef = useForkRef(children.ref, nodeRef);

const childrenProps: any = { ref: handleRef };
React.cloneElement(children, childrenProps)

加载全部内容

相关教程
猜你喜欢
用户评论