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

IT技术 javascript reactjs draggable strict-mode
2021-05-04 21:01:22

Draggable 包在严格模式下导致错误:

警告:findDOMNode在 StrictMode 中不推荐使用。findDOMNode传递了一个位于 StrictMode 内的 DraggableCore 实例。相反,直接向要引用的元素添加 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.
*/

有用!