React Bootstrap 组件的无限循环

Question

我安装了react-bootstrap 5.1.3，应用程序运行正常，但是当我复制粘贴这个组件时，应用程序进入死循环。终端应用程序运行良好，但浏览器没有显示任何错误。我的应用程序中没有其他组件。

反应版本：17.0.2

=> Navigation.js

import React from "react";
import { Container, Navbar, NavDropdown } from "react-bootstrap";

const Nav = () => {
  return (
    <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
      <Container>
        <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
        <Navbar.Toggle aria-controls="responsive-navbar-nav" />
        <Navbar.Collapse id="responsive-navbar-nav">
          <Nav className="me-auto">
            <Nav.Link href="#features">Features</Nav.Link>
            <Nav.Link href="#pricing">Pricing</Nav.Link>
            <NavDropdown title="Dropdown" id="collasible-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>
          <Nav>
            <Nav.Link href="#deets">More deets</Nav.Link>
            <Nav.Link eventKey={2} href="#memes">
              Dank memes
            </Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
};

export default Nav;

=> App.js

import 'bootstrap/dist/css/bootstrap.min.css';
import React from 'react';
import Nav from './components/Header/Nav';

function App() {
  return (
    <div>
      <Nav />
    </div>
  );
}

export default App;

Answer 1

问题与您的 Nav 组件的名称有关。您正在尝试在 Nav 组件中渲染 react-bootstrap 的 Nav，但您没有从 react-[=29= 导入它]。结果，Nav 调用自身并导致无限循环。

您应该从 react-bootstrap 导入 Nav 您的 Nav 函数的名称及其导出命令，例如：

import { Nav, Container, Navbar, NavDropdown } from "react-bootstrap";

const Navivation = () => {

// ...
};
export default Navivation;

您可以查看 this sandbox 的实际工作示例。

React Bootstrap 组件的无限循环

Infinity loop for React Bootstrap components

reactjs

react-bootstrap