最新react 16.13.1版本中，由于findDomNode被deprecated，导致react-transition-group的warning问题

Question

听了老师的课，就想试着把typescript, react-hooks, react-redux来完成这项目练习下。配置正常工作，但是发现，在React.StrictMode模式下，引用react-transition-group会有warning,关于findDomNode的，说建议使用this.refs。抄了一个解决方案，但是感觉不是那么舒服，想请教老师下

 // 为了第三方包的一个解决方案
  const nodeRef = React.useRef(null);

  return (
    <HeaderWrapper data-test='Header'>
      <Logo href='/'/>
      <Nav>
        <NavItem className="left active">首页</NavItem>
        <NavItem className="left">下载App</NavItem>
        <SearchWrapper>
          <CSSTransition
            in={focused}
            timeout={20}
            classNames="slide"
            //这里使用了nodeRef就没有了warning？？？
            nodeRef={nodeRef}
          >
          <NavSearch 
            className={focused ? 'focused' : ''}
            onFocus={() => setOnFocus(true)}
            onBlur={() => setOnFocus(false)}
          />
          </CSSTransition>
          
          <i className={focused ? 'focused iconfont' : 'iconfont'}>&#xe682;</i>
        </SearchWrapper> 

Answer 1

Dell 2020-06-07 21:40:16

这块同学稍微等等吧，我会在今年对这块课程进行整体更新

• 提问者 慕标6429440 #1

  吼得！！

• 我接受不了 #2

  老师，我使用function的方式创建组件，但是组件内的classNames 没有被加载在dom上，是因为什么呢

Answer 2

静秋叶 2022-02-10 23:08:49

动画效果正常，我的也报

warning，真是：conding无常，大肠套小肠

下载视频