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

Question

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

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

​

​

我读到关于在这个official changelog和git issue中提到的CSSTransition元素上使用nodeRef={nodeRef}的文章，如下所示，但随后它开始变得奇怪，即一些元素在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>

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

​

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