findDOMNode 在 StrictMode 中被弃用。向 findDOMNode 传递了一个位于 StrictMode 中的 DraggableCore 实例
findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of DraggableCore which is inside StrictMode
可拖动包在严格模式下导致错误:
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,你有任何 nice/elegant 解决方案吗?
根据 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.
*/
有效!
可拖动包在严格模式下导致错误:
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,你有任何 nice/elegant 解决方案吗?
根据 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.
*/
有效!