在StrictMode中不推荐使用findDOMNode findDOMNode传递了StrictMode内部的DraggableCore实例

问题描述

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

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of DraggableCore which is inside StrictMode. Instead,add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage

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

解决方法

根据https://github.com/STRML/react-draggable/blob/v4.4.2/lib/DraggableCore.js#L159-L171上的官方git存储库

/* 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.
*/

有效！