React-Transition-Group：在 StrictMode 中不推荐使用 findDOMNode

Question

我正在使用动画库react-transition-group在 react 中使用<TransitionGroup>和<CSSTransition>为 TODO 列表设置动画，如下所示

<ul>
   <TransitionGroup className="todo-list">
      {incompleteTodos.map((task) => (
      <CSSTransition key={task.id} timeout={500} classNames={styles}>
         <li key={task.id}>
            <TodoTask
               todo={task}
               onClick={(todo) =>
            toggleTodo({ data: todo })}
            />
         </li>
      </CSSTransition>
      ))}
   </TransitionGroup>
</ul>

但是我在控制台中收到如下错误：

我阅读了有关在此官方更改日志和git 问题中提到的CSSTransition元素上使用nodeRef={nodeRef}的CSSTransition ，如下所示，但随后它开始表现得很奇怪，即某些元素在 UI 中没有正确显示，如下面的代码片段截图所示：

const nodeRef = React.useRef(null)

和

<ul>
   <TransitionGroup className="todo-list">
      {incompleteTodos.map((task) => (
      <CSSTransition
         key={task.id}
         timeout={500}
         classNames={styles}
         nodeRef={nodeRef}
         >
         <li key={task.id} ref={nodeRef}>
            <TodoTask
               todo={task}
               onClick={(todo) =>
            toggleTodo({ data: todo })}
            />
         </li>
      </CSSTransition>
      ))}
   </TransitionGroup>
</ul>

此截图是在nodeRef中应用nodeRef后CSSTransition

Answer 1

您需要为每个CSSTransition制作一个单独的ref 。 最简单的方法是制作自定义组件：

<ul>
   <TransitionGroup className="todo-list">
      {incompleteTodos.map((task) =>
        <TransitionTodo key={task.id} todo={task}/>}
  </TransitionGroup>
</ul>

function TransitionTodo({todo}) {
  nodeRef = useRef();
  return (
    <CSSTransition
       timeout={500}
       classNames={styles}
       nodeRef={nodeRef}
     >
       <li ref={nodeRef}>
          <TodoTask
             todo={todo}
             onClick={(todo) =>
               toggleTodo({ data: todo })}
          />
       </li>
    </CSSTransition>
  );
}