1

在尝试将react 路由与react-transition-group结合使用时，我遇到了与 findDOMnode 弃用相关的警告，警告指出：

index.js:1 警告：在 StrictMode 中不推荐使用 findDOMNode。findDOMNode 被传递了一个在 StrictMode 中的 Transition 实例。相反，直接将 ref 添加到要引用的元素。在此处了解有关安全使用 refs 的更多信息：https ://reactjs.org/link/strict-mode-find-node

上述警告指的是以下代码：

<Route  key={path} path={path} exact>

  
{({match})=>(

  <CSSTransition
 
  in={match!=null}
  timeout={300}
  classNames="page"
  unmountOnExit
  mountOnEnter
  
  >

    <div  className="page">
    
      <Component />
    </div>
  </CSSTransition>  

 )}

  </Route>)

我第一次尝试摆脱该警告是按照建议使用 useRef ：

const nodeRef = useRef(null);

将 nodeRef 作为 CSStransation 元素的 ref 属性传递，但警告仍然出现。

出于某种原因，我只能通过传递我也在 CSStransition 元素的“in”道具中使用的触发事件来消除警告，如下所示：

 <Route  key={path} path={path} exact>

  
{({match})=>(

  <CSSTransition
  
  ref={nodeRef}
  in={match!=null}
  timeout={300}
  classNames="page"
  unmountOnExit
  mountOnEnter
  key={match!=null}    <------------ Adding this removed the warning
  >

    <div  className="page">
    
      <Component />
    </div>
  </CSSTransition>  

 )}

  </Route>)

现在一切都很顺利，但我真的不明白为什么，即使我从 CSStransition 元素中删除了 ref，我也不会再收到任何警告。

有人不明白为什么会发生这种情况吗？

4

1 回答 1

0

我也花了一段时间试图弄清楚这一点，我终于明白了！您需要单独使用每条路线nodeRef中的道具。CSSTransition每条路线都有自己的ref，ref需要nodeRef相应地分配给。我能够通过使用一个引用数组、映射每条路由并将引用分配给当前索引来完成这项工作。

看看我制作的这个工作示例：

这是最有用的代码块：

////// CONTENT TRANSITION ROUTER
const PageContent = withRouter(({ location }) => {
  let routeRefs: any[] = [];

  const isMatch = useCallback(
    (path: string): boolean => {
      return location.pathname === path ? true : false;
    },
    [location]
  );

  return (
    <>
      {appRoutes.map(({ path, Component }, index) => {
        routeRefs[index] = React.useRef(null);

        return (
          <Route key={index} exact path={path}>
            {() => {
              // Route callback ensures the transitions are loaded correctly
              return (
                <CSSTransition
                  nodeRef={routeRefs[index]}
                  in={isMatch(path)}
                  timeout={300}
                  classNames="fade"
                  unmountOnExit
                  appear
                >
                  <div ref={routeRefs[index]} className="fade">
                    <Component />
                  </div>
                </CSSTransition>
              );
            }}
          </Route>
        );
      })}
    </>
  );
});
于 2021-10-19T05:33:11.380 回答