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

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

方法一 useImperativeHandle

采用useImperativeHandle：

function Item(props, outerRef) {
  const innerRef = useRef();
  
  useImperativeHandle(outerRef, () => ({
    focus: () => {
      innerRef.current.focus();
    }
  }));
  return <input ref={innerRef} ... />;
}
Item = forwardRef(Item);

这种方案适合比如input组件，那我把focus方法的目标元素也就是input组件，用这种方式可以绑定到一起。由于我的场景中，没有需要暴露的方法，或者有的组件暴露的方法太多，而且我有大于3个ref，我就暂时不采用这种方式。

方法二 ref function

如果是两个useRef，可以这样绑定：

const ref1 = useRef(null);
const ref2 = useRef(null);
const ref3 = useRef(null);

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

这个对于多个innerRef有用，可是我用到了forwardedRef，试了之后不成功。

方法三 mergeRefs

写一个mergeRefs方法：

const mergeRefs = (...refs) => {
    return node => {
      for (const ref of refs) {
        ref.current = node
      }
    }
}

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

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

方法四 优化mergeRefs

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

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(innerRef1, innerRef2, forwardedRef)}>
        ...
    </div>
);

成功啦！

结尾

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