findDOMNode 在 StrictMode 中被弃用。 警告 - react-transition-group + react v17 + Javascript（不是 Typescript）

Question

我正在尝试删除我正在处理的项目中的警告消息。

index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition 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/link/strict-mode-find-node
    at div
    at Transition (http://localhost:3000/static/js/vendors~main.chunk.js:47483:30)
    at CSSTransition (http://localhost:3000/static/js/vendors~main.chunk.js:46600:35)
    at div
    at TransitionGroup (http://localhost:3000/static/js/vendors~main.chunk.js:48052:30)
    at Contacts (http://localhost:3000/static/js/main.chunk.js:1623:96)
    at div
    at div
    at Home (http://localhost:3000/static/js/main.chunk.js:2549:88)
    at AuthCheck (http://localhost:3000/static/js/main.chunk.js:2705:5)
    at Routes (http://localhost:3000/static/js/vendors~main.chunk.js:45749:5)
    at div
    at Router (http://localhost:3000/static/js/vendors~main.chunk.js:45682:15)
    at BrowserRouter (http://localhost:3000/static/js/vendors~main.chunk.js:45198:5)
    at ContactState (http://localhost:3000/static/js/main.chunk.js:3743:85)
    at AuthState (http://localhost:3000/static/js/main.chunk.js:3243:85)
    at AlertState (http://localhost:3000/static/js/main.chunk.js:2844:85)
    at App

有问题的代码：

import React, { Fragment, useEffect } from 'react';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import { useContactContext } from '../../context/contact/contactContext';
import { useAuthtContext } from '../../context/auth/authContext';

import ContactItem from './ContactItem';
import Spinner from '../layout/Spinner';

const Contacts = () => {
    const { contacts, filtered, getContacts, loading } = useContactContext();
    const { isAuthenticated } = useAuthtContext();

    useEffect(() => {
        if (isAuthenticated) {
            getContacts();
        }
        // eslint-disable-next-line
    }, [isAuthenticated]);

    if (!loading && contacts !== null && contacts.length === 0) {
        return <h4>Please add a contact</h4>;
    }

    return (
        <Fragment>
            {contacts === null || loading ? (
                <Spinner />
            ) : (
                <TransitionGroup>
                    {(filtered || contacts).map((contact) => (
                        <CSSTransition timeout={1000} classNames="item" key={contact._id}>
                            <ContactItem contact={contact} />
                        </CSSTransition>
                    ))}
                </TransitionGroup>
            )}
        </Fragment>
    );
};

export default Contacts;

我花了几个小时寻找答案，但我觉得自己在无休止的循环中奔波。

为了消除警告，我需要在每个CSSTransition元素上使用useRef钩子，将它与（它的子元素？）连接起来。

我不能在组件的渲染 function 中使用useRef() ，所以我定义了一个新组件来显示每个TransitionItem ：

...
        const TransitionItem = ({ contact, ...props }) => {
            const ref = useRef(null); // Had to use this ref to go around a warning
            return (
                <CSSTransition nodeRef={ref} timeout={1000} classNames="item" {...props}>
                    <div ref={ref}>
                        <ContactItem contact={contact} />
                    </div>
                </CSSTransition>
            );
        };
    
        return (
            <Fragment>
                {contacts === null || loading ? (
                    <Spinner />
                ) : (
                    <TransitionGroup>
                        {(filtered || contacts).map((contact) => (
                            <TransitionItem key={contact._id} contact={contact} />
                        ))}
                    </TransitionGroup>
                )}
            </Fragment>
        );
...

现在每次我尝试点击一个按钮，从列表中删除一个项目时，我都会看到一个“闪烁”的效果，你可以在这个沙盒中查看：（点击红色按钮删除一个项目） https:// codesandbox.io/s/kind-feather-2psuz

“闪烁”问题仅在我将CSSTransition组件移动到新的TransitionItem组件时出现，但如果我不将其移动到那里，我就无法在每个项目上使用useRef挂钩。

请帮助: :)

附言：

1. 从 index.js 中删除<React.StrictMode>并不能解决根本问题。

Answer 1

我在我的项目中有同样的警告，我可以用这个解决方案修复它，谢谢 pixel-fixer ！

关于 repo react-transition-group 的问题 #668

从 4.4.0 发行说明开始：

react-transition-group 内部使用 findDOMNode，它已被弃用并在严格模式下产生警告，因此现在您可以选择将 nodeRef 传递给 Transition 和 CSSTransition，它是一个 ref object，应该指向过渡子节点：

你可以这样解决

import React from "react"
import { CSSTransition } from "react-transition-group"

const MyComponent = () => {
  const nodeRef = React.useRef(null)
  return (
    <CSSTransition nodeRef={nodeRef} in timeout={200} classNames="fade">
      <div ref={nodeRef}>Fade</div>
    </CSSTransition>
  )
}

我希望它对你有用，祝你有美好的一天！