React Transition Group：如何将 ref 传递给映射组件以避免警告：在 StrictMode 中不推荐使用 findDOMNode

Question

我有以下代码来呈现带动画的过滤列表 mounting/unmounting:

function List({ list, templates, transition }) {
  return (
    <TransitionGroup 
        className="wscfl-list"
        component="ul"
    >
    {list.map((item) => (
      <CSSTransition
        key={item.id}
        timeout={transition.timeout}
        classNames={'wscfl-list__' + item.type + '-'}
      >
        <li className={'wscfl-list__' + item.type} >
          <Item item={item} template={templates[item.type]} pkey={item.id}/>
        </li>
      </CSSTransition>
    ))}
    </TransitionGroup>
  );
}

这将抛出一个 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. 我想避免的。

我知道我应该向 CSSTransition 添加一个引用 (https://github.com/reactjs/react-transition-group/releases/tag/v4.4.0):

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

但是我不能在地图回调中使用 useRef，因为不允许在回调中使用挂钩。

我尝试创建一个引用数组 (How target DOM with react useRef in map):

function List({ list, templates, transition }) {
  // 
  const refsArray = [];
  for (var i= 0; i < list.length; i++) {
    refsArray.push(React.createRef());
  }
  let refs = React.useRef(refsArray);
  React.useEffect(() => {
    refs.current[0].current.focus()
  }, []);
  return (
    <TransitionGroup 
        className="wscfl-list"
        component="ul"
    >
    {list.map((item, i) => (
      <CSSTransition
        key={item.id}
        nodeRef={refs.current[i]}
        timeout={transition.timeout}
        classNames={'wscfl-list__' + item.type + '-'}
      >
        <li ref={refs.current[i]} className={'wscfl-list__' + item.type} >
          <Item item={item} template={templates[item.type]} pkey={item.id}/>
        </li>
      </CSSTransition>
    ))}
    </TransitionGroup>
  );
}

但这会在第一次渲染时抛出错误 TypeError: Cannot read property 'current' of undefined。

   9 | }
  10 | let refs = React.useRef(refsArray);
  11 | React.useEffect(() => {
> 12 |   refs.current[0].current.focus()
     | ^  13 | }, []);
  14 | return (
  15 |   <TransitionGroup

有没有什么方法可以在不使用 findDOMNode 的情况下对映射的组件使用 CSSTransition？

Answer 1

无需使用引用数组即可处理此问题的最简单方法是在另一个组件中提取映射内容

const Content = ({item, transition, templates, ...rest}) =>  {
  const nodeRef = React.useRef(null)
  return(
    <CSSTransition
        {...rest}
        nodeRef={nodeRef}
        timeout={transition.timeout}
        classNames={'wscfl-list__' + item.type + '-'}
      >
        <li ref={nodeRef} className={'wscfl-list__' + item.type} >
          <Item item={item} template={templates[item.type]} pkey={item.id}/>
        </li>
      </CSSTransition>

   )
}

function List({ list, templates, transition }) {
  return (
    <TransitionGroup 
        className="wscfl-list"
        component="ul"
    >
    {list.map((item) => (
        <Content item={item} key={item.id} templates={templates} transition={transition}/>
    ))}
    </TransitionGroup>
  );
}

React Transition Group：如何将 ref 传递给映射组件以避免警告：在 StrictMode 中不推荐使用 findDOMNode

React Transition Group: How to pass ref to mapped component to avoid Warning: findDOMNode is deprecated in StrictMode

reactjs

react-transition-group

react-ref