反应路由器 findDomNode 已弃用答案

【问题标题】：React router findDomNode is deprecated反应路由器 findDomNode 已弃用
【发布时间】：2020-12-04 18:08:15
【问题描述】：

我正在开发我的 React 网站，我正在使用 React-router-dom 来切换路由，并使用 React-transition-group 来为这些路由设置动画。一切正常，只是在我切换路由时控制台出现错误。

错误：

我对 React 还不是很熟练，以前也遇到过这个问题，但没有解决。我试图用谷歌搜索它，但我发现的只是禁用 StrickMode，我认为这不是正确的解决方案。

App.js 文件

<Router>
        <div className="App">
          <div className="wrapper">
          <Navigation />
              <Route key="/" exact path="/">
                  {({match})=>(
                    <CSSTransition
                      in={match != null}
                      timeout={300}
                      classNames="slide-backward"
                      unmountOnExit
                      >
                        <div className="page">
                          <Home />
                        </div>

                    </CSSTransition>
                  )}
              </Route>

            <Route key="/about" exact path="/about">
                  {({match})=>(
                    <CSSTransition
                      in={match != null}
                      timeout={300}
                      classNames="slide-forward"
                      unmountOnExit
                      >
                        <div className="page">
                          <About />
                        </div>

                    </CSSTransition>
                  )}
            </Route>
       </div>
   </div>
</Router>

导航组件

<div className="menu">
   <ul>
     <li><NavLink to="/" exact activeClassName="active">Domov</NavLink></li>
     <li><NavLink to="/about" exact activeClassName="active">O nás</NavLink></li>
   </ul>
</div>

非常感谢。

【问题讨论】：

标签： javascript reactjs react-router react-transition-group

【解决方案1】：

有点晚了 - 但如果其他人遇到这个问题，这里有一个答案..

OP - 您的问题源于 react-transition-group 包在 it's 代码中使用 findDOMnode，而不是您的；看起来您可以创建一个 ref 并将其传递给您的 CSSTransition 元素以消除错误，see here 如果您想尝试一下（确保您的 react-transition-group 版本是最新的-日期）。

失败了，因为你承认你对 React 还很陌生，除了警告之外没有主要痛点，现在可以安全地忽略它 - 这可能是这些包的未来版本将删除 findDOMnode 并且您不会看到这些错误。

说明
警告源于使用了 react 内置的 findDOMnode escape hatch。这让 react 可以在 DOM 中找到原生元素，但这与 react 不直接使用 DOM 的整个想法背道而驰

为避免这种情况，您应该使用refs 来指向元素，而不是使用 findDOMnode。

【讨论】：