ReactJS中如何为单个DOM元素绑定多个Ref？

要实现将内部thisRef和父组件通过forwardRef传递的ref绑定到同一个div元素上，最直接的方式是使用函数式ref，它能在DOM元素挂载时同时给两个ref赋值。

实现代码示例 #

import { forwardRef, useRef } from "react";

export const PopOver = ({
  show = false,
  ...props
}, ref) => {

  const thisRef = useRef(null);

  // 此处可使用thisRef处理内部UI逻辑，比如获取元素尺寸、控制滚动等
  // 示例：useEffect(() => { if (thisRef.current) thisRef.current.focus(); }, [show]);

  return (
    <div
      ref={(element) => {
        // 赋值给内部ref
        thisRef.current = element;
        // 处理父组件传递的ref，兼容函数式ref和对象式ref
        if (typeof ref === 'function') {
          ref(element);
        } else if (ref != null) {
          ref.current = element;
        }
      }}
      {...props}
    >
      Hello world
    </div>
  );
};

export default forwardRef(PopOver);

代码说明 #

• 函数式ref会在DOM元素挂载/卸载时触发，参数element就是当前的div DOM节点。
• 先将节点赋值给内部的thisRef，满足组件内部的UI操作需求。
• 再根据父组件传递的ref类型做处理：如果是函数式ref，直接调用函数传入节点；如果是对象式ref（比如用useRef创建的），则给其current属性赋值。

另一种场景：暴露自定义方法给父组件 #

如果需要同时将内部方法暴露给父组件，可以使用useImperativeHandle钩子，此时父组件的ref会拿到自定义的对象（包含DOM元素和内部方法）：

import { forwardRef, useRef, useImperativeHandle } from "react";

export const PopOver = ({
  show = false,
  ...props
}, ref) => {

  const thisRef = useRef(null);

  // 内部UI方法示例
  const scrollToTop = () => {
    if (thisRef.current) {
      thisRef.current.scrollTop = 0;
    }
  };

  // 定义父组件ref能访问的内容
  useImperativeHandle(ref, () => ({
    // 暴露DOM元素
    dom: thisRef.current,
    // 暴露内部方法
    scrollToTop
  }), [thisRef.current]);

  return (
    <div
      ref={thisRef}
      {...props}
    >
      Hello world
    </div>
  );
};

export default forwardRef(PopOver);

这种方式下，父组件可以通过ref.current.dom拿到DOM元素，通过ref.current.scrollToTop()调用内部方法。

内容的提问来源于stack exchange，提问作者nishanth_duraisamy