findDOMNode 在 StrictMode 中已弃用。 findDOMNode 被传递了一个 DraggableCore 的实例，该实例位于 StrictMode 内

Posted 2023-05-08

【中文标题】findDOMNode 在 StrictMode 中已弃用。 findDOMNode 被传递了一个 DraggableCore 的实例，该实例位于 StrictMode 内

【英文标题】：findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of DraggableCore which is inside StrictMode

【发布时间】：2020-12-15 14:58:28

【问题描述】：

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

警告：findDOMNode 在 StrictMode 中已弃用。 findDOMNode 是 传递了一个 DraggableCore 实例，该实例位于 StrictMode 内部。 相反，直接将 ref 添加到要引用的元素。 在此处了解有关安全使用 refs 的更多信息： https://reactjs.org/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage

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

【参考方案1】：

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

有效！

【讨论】：

感谢您跟进您自己的问题，这对我有帮助！