react-draggable findDOMnode 已弃用 - 参考已在使用中

Question

我有一个功能组件，其中的对象可以在设定区域周围拖动。 然后保存这些对象，并在下次启动时将这些对象放置在上次与浏览器大小无关的相同位置。

对于这个调整大小和放置部分，我基本上获取了元素在 dom 中启动时的宽度/高度，以准确地将对象放置在相同的位置。

 list.map((item)=>{ return (
  <Draggable
      key={item.ID}
      grid={[1, 1]}
      bounds="parent"
      id={item.ID}
      position={{ x: item.positionX, y: item.positionY }}
      onDrag={(e, ui) => {
                       const newX = item.positionX + ui.deltaX;
                       const newY = item.positionY + ui.deltaY
                       updatePosition(item.ID, newX, newY)
                         }
              }
                                >
    <div style={{ "position": "absolute", "display": "flex" }}
         ref={element => { handleInitObjDOM(element, item.ID) }}> 
           // here I get the elements' width/height 
          <div style={getObjectStyle(item.ID)}>
             {some_object}
          </div>
    </div>
</Draggable>)

因此，通过此设置，我在严格模式下收到警告

“警告：findDOMNode 已弃用，并将在下一个主要版本中删除。相反，请将 ref 直接添加到要引用的元素。”

有一个解决方案（findDOMNode 在 StrictMode 中已弃用。findDOMNode 传递了一个位于 StrictMode 内的 DraggableCore 实例），但这意味着我可以在

<Draggable> 

和子

<div>

中使用相同的引用，这基本上是拖了。

但是我的孩子

<div>

有一个参考回调。

有没有办法解决“警告”和“迁移”以使用上述设置的引用？

Answer 1

正如您已经说过的，解决方案是在

<Draggable>

和子

<div>

中使用相同的引用。在你的情况下，它可能是这样的：

function MyComponent() {
    const nodeRef = React.useRef(null);

    return (
        <Draggable nodeRef={nodeRef}>
            <div 
               ref={(element) => {
                 nodeRef.current = element;
                 handleInitObjDOM(element, item.ID);
               }}>
               Example Target
            </div>
        </Draggable>
    );
}