reactjs - Advarsel: findDOMNode er foreldet i StrictMode når du bruker react-bootstrap Navbar

Jeg prøvde å bruke react-bootstrap sin Navbar-komponent i TypeScript-malen, og jeg fant følgende advarsel i Chrome-konsollen.

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)

Nedenfor er koden

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;

Selv Navbar-komponentens kollapsfunksjon fungerer, hva bør jeg gjøre med advarselmeldingen.

Svar #1

Tilsynelatende er det allerede et GitHub-problem. her

Siden dette er en advarsel (og ikke en feil), vil appen din derfor fortsette å fungere helt fint. Facebook vil etter hvert avvikle findDOMNode ettersom det blokkerer visse forbedringer i React i fremtiden

react-bootstrap vil etter hvert oppgradere koden sin for å slutte å bruke findDomNodes til fordel for andre egnede alternativer.

Svar #2

Den beste løsningen for meg var å sette animasjon til false som foreslått ovenfor, men du må gjøre det med animation="false" IKKE animation={false} ellers vil du få en annen advarsel. Du må også legge det til i Navbar.Collapse-taggen slik:

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

Relaterte artikler