警告：使用 react-bootstrap 导航栏时，在 StrictMode 中不推荐使用 findDOMNode答案

【问题标题】：Warning: findDOMNode is deprecated in StrictMode when using react-bootstrap Navbar警告：使用 react-bootstrap 导航栏时，在 StrictMode 中不推荐使用 findDOMNode
【发布时间】：2020-07-07 04:29:10
【问题描述】：

我尝试在 typescript 模板中使用 react-bootstrap 的 Navbar 组件，但在 Chrome 控制台中发现以下警告。

index.js:1 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.
    in div (created by Context.Consumer)
    in Transition (created by Collapse)
    in Collapse (created by Context.Consumer)
    in NavbarCollapse (at NavigationBar.tsx:10)
    in nav (created by Navbar)
    in Navbar (at NavigationBar.tsx:7)
    in NavigationBar (at App.tsx:8)
    in div (at App.tsx:7)
    in App (at src/index.tsx:10)
    in StrictMode (at src/index.tsx:9)

下面是代码

import React from 'react';
import './NavigationBar.css';
import { Navbar, Nav, NavDropdown } from 'react-bootstrap';

function NavigationBar() {
    return (
        <Navbar bg="light" expand="lg">
            <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
            <Navbar.Toggle aria-controls="basic-navbar-nav" />
            <Navbar.Collapse id="basic-navbar-nav">
                <Nav className="mr-auto">
                    <Nav.Link href="#home">Home</Nav.Link>
                    <Nav.Link href="#link">Link</Nav.Link>
                    <NavDropdown title="Dropdown" id="basic-nav-dropdown">
                        <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
                        <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
                        <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
                        <NavDropdown.Divider />
                        <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
                    </NavDropdown>
                </Nav>
            </Navbar.Collapse>
        </Navbar>);
}

export default NavigationBar;

即使导航栏组件的折叠功能也能正常工作，出现警告信息该怎么办。

【问题讨论】：

标签： reactjs typescript react-bootstrap

【解决方案1】：

显然这已经是 github 问题了。 here

由于这是一个警告（而不是错误），因此您的应用将继续正常运行。 Facebook 最终将弃用 findDOMNode，因为它会阻止未来对 React 的某些改进

react-bootstrap 最终将升级它的代码以使用findDomNodes 放弃其他合适的替代方案。

【讨论】：

感谢您的信息。现在可以隐藏这个警告吗？
我不能肯定。但有时某些警告仅出现在开发模式中，而不会出现在生产版本中。做测试，看看自己。干杯:)
我创建了一些反应应用程序，有些有这个问题，有些没有。但是，如果您按下导航栏上的显示/隐藏菜单按钮，这似乎会触发。
@Rickard 对我来说，按下菜单按钮时也会发生这种情况
我把动画弄错了，然后它对我有用，但动画不起作用。

【解决方案2】：

对我来说最好的解决方案是按照上面的建议将动画设置为 false，但是，您需要使用 animation="false" 而不是 animation={false} 来执行此操作，否则您会收到另一个警告。您还需要将其添加到 Navbar.Collapse 标记中：

<Navbar animation="false" ...>
  ...
  <Navbar.Collapse animation="false" ...>

【讨论】：

我使用 react-bootstrap 模态组件收到了同样的警告。为我停止警告的解决方案是添加 animation={false} 如下：
@jcklopp 它消除了错误，但如果没有模态框上的动画，我的眼睛会不开心。
对我没有帮助

【解决方案3】：

findDomNode 错误通常是由旧的组件包引起的例如 react-bootstrap 正在修复一些东西，但由于抱怨已经关闭了线程：

https://github.com/react-bootstrap/react-bootstrap/issues/5075

他们提供的临时解决方案是在您的应用中将 strictmode 设置为 false

如果您自己的代码有问题，请尝试阅读以下内容：

https://medium.com/trabe/getting-rid-of-finddomnode-method-in-your-react-application-a0d7093b2660

至于导航栏折叠 collapseOnSelect：

<Navbar collapseOnSelect bg="light" expand="lg">

【讨论】：