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

Question

我正在使用动画库 react-transition-group 为使用 <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>

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

我读到了在official changelog 和git issue 中提到的CSSTransition 元素上使用nodeRef={nodeRef} 的内容，如下所示，但随后它开始表现得很奇怪，即某些元素在UI 中没有正确显示，如下所示截图如下代码sn-ps：

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>

此截图是在CSSTransition 中应用nodeRef 后拍摄的

Answer 1

您需要为每个CSSTransitions 创建一个单独的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>
  );
}