findDOMNode устарел в StrictMode. findDOMNode был передан экземпляр DraggableCore, который находится внутри StrictMode

#javascript #reactjs #draggable #strict-mode

#javascript #reactjs #перетаскиваемый #strict-mode

Вопрос:

Перетаскиваемый пакет вызывает ошибку в строгом режиме:

Предупреждение: findDOMNode устарел в StrictMode. findDOMNode был передан экземпляр DraggableCore, который находится внутри StrictMode. Вместо этого добавьте ссылку непосредственно на элемент, на который вы хотите сослаться. Узнайте больше о безопасном использовании ссылок здесь:https://reactjs.org/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage

По-видимому, они никогда не исправляли этоhttps://github.com/STRML/react-draggable/issues/440 , есть ли у вас какое-нибудь хорошее / элегантное решение?

Ответ №1:

В соответствии с официальным репозиторием git наhttps://github.com/STRML/react-draggable/blob/v4.4.2/lib/DraggableCore.js#L159-L171

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

это работает!

Комментарии:

1. Спасибо, что ответили на ваш собственный вопрос, это помогло мне!

2. Это действительно должно быть по умолчанию в перетаскиваемых документах 😐

3. работал чисто, спасибо!