如何在react-beautiful-dnd中绑定多个ref 解决拖拽失效问题

你之前的多ref绑定写法ref={provided.innerRef, ref}使用了JavaScript逗号运算符，表达式最终只会返回最后一个值即你的自定义ref，react-beautiful-dnd的provided.innerRef完全没有被绑定到DOM节点上，库无法获取拖拽元素的引用，直接导致拖拽功能失效。

使用回调ref同时给两个ref赋值，要注意兼容provided.innerRef可能是函数也可能是ref对象的情况，修改对应部分代码即可：

{(provided) => {
  const style = {
    backgroundColor: 'red',
    height: styleHeight,
      ...provided.draggableProps.style
  };

  return (
    <div 
      ref={(node) => {
        // 赋值react-beautiful-dnd的内部ref
        if (typeof provided.innerRef === 'function') {
          provided.innerRef(node);
        } else if (provided.innerRef) {
          provided.innerRef.current = node;
        }
        // 赋值自定义ref
        ref.current = node;
      }}
      {...provided.dragHandleProps}
      {...provided.draggableProps}
      style={style}
      className={classNames(styles.largeEvent,
        { [styles.smallEvent]: events.length > 2 },
        { [styles.hide]: index >= 7 })}
    > 
      <MonthlyEvent eventImageSrc={event.eventImageSrc} channel={event.channel}  />
    </div>
  )
}}

如果项目里有多ref绑定的复用需求，可以封装通用的mergeRefs工具函数：

function mergeRefs(...refs) {
  return (node) => {
    refs.forEach(ref => {
      if (typeof ref === 'function') {
        ref(node);
      } else if (ref) {
        ref.current = node;
      }
    });
  };
}

使用时直接传入需要绑定的所有ref即可，写法更简洁：

<div ref={mergeRefs(provided.innerRef, ref)}
  // 其余属性保持不变
>

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