【问题标题】:findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of DraggableCore which is inside StrictModefindDOMNode 在 StrictMode 中已弃用。 findDOMNode 被传递了一个 DraggableCore 的实例,该实例位于 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,你有什么好的/优雅的解决方案吗?

【问题讨论】:

    标签: javascript reactjs draggable strict-mode


    【解决方案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.
    */
    

    有效!

    【讨论】:

    • 感谢您跟进您自己的问题,这对我有帮助!
    猜你喜欢
    • 1970-01-01
    • 2021-08-10
    • 2021-02-26
    • 1970-01-01
    • 2021-03-04
    • 2021-10-12
    • 1970-01-01
    相关资源
    最近更新 更多