findDOMNode在StrictMode中已弃用.findDOMNode被传递了一个DraggableCore的实例

Question

可拖动包在严格模式下导致错误：

警告：findDOMNode在StrictMode中已弃用。findDOMNode传递了StrictMode中的DraggableCore实例。相反，直接向要引用的元素添加一个ref。在此处了解有关安全使用裁判的更多信息：https://reactjs.org/docs/strict-mode.html#warning-关于不推荐使用的finddomnode使用

显然他们从未修复过它https://github.com/STRML/react-draggable/issues/440，你有什么好的/优雅的解决方案吗？

Answer 1

根据https://github.com/STRML/react-draggable/blob/v4.4.2/lib/DraggableCore.js#L159-L171

/* If running in React Strict mode, ReactDOM.findDOMNode() is deprecated.
* Unfortunately, in order for <Draggable> to work properly, we need raw access
* to the underlying DOM node. If you want to avoid the warning, pass a `nodeRef`
* as in this example:
*/
function MyComponent() {
const nodeRef = React.useRef(null);
return (
<Draggable nodeRef={nodeRef}>
<div ref={nodeRef}>Example Target</div>
</Draggable>
);
}
/*
* This can be used for arbitrarily nested components, so long as the ref ends up
* pointing to the actual child DOM node and not a custom component.
*/

它有效！