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

Question

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

<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 问题中提到nodeRef={nodeRef}的元素，如下所示，但后来它开始表现得很奇怪，即一些元素在 UI 中没有正确显示，如下面的代码片段截图所示：CSSTransition

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截图CSSTransition

Answer 1

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

<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>
  );
}