如何在 React 中的同一个 html 元素上使用多个 ref 变量？

Question

这是我的功能组件的渲染方法的简短片段（为简洁起见删除了不必要的代码）

  return (
    <Draggable draggableId={id} index={index}>
      {(provided, snapshot) => (
        <>
          <div className="carditem" ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps} onClick={onClick}>
            <span className="carditem_title">{card.title}</span>
            <i className="fas fa-pencil-alt edit_button" onClick={onEditClick} />
            {hasDescription && <i className="fas fa-align-left desc_tag" title="This card has a description" />}
          </div>
          {isEditing && showOverlay && <input className="card_edit" type="text" autoFocus />}
        </>
      )}
    </Draggable>
  );

在第 5 行，如果你注意到我有一个

ref={provided.innerRef}

我想用 className="cardItem" 获取 div 的 x,y 坐标，因此我想为该元素添加一个 ref。但是 ref 已经存在，如上所示。 如何在不破坏现有引用的情况下添加自己的引用变量？

不确定是否有帮助，但我正在使用 react-beautiful-dnd，这就是 provided.innerRef 的来源。

Answer 1

您可以使用回调绑定多个 refs

const refHanlder = el => {
  refA.current = el;
  refB.current = el;
}

ref={el => refHandler}

回调也用于引用数组

ref={el => elementRef.current[x] = el}

如何在 React 中的同一个 html 元素上使用多个 ref 变量？

How to use multiple ref variables on same html element in react?

html

javascript

ref

reactjs