ReactJS新手使用react-bootstrap Navbar出现页面无限加载问题求助

你的代码触发了组件无限递归渲染，核心是两个错误导致的：

• 没有从react-bootstrap导入Navbar组件
• 你自定义的组件名称和react-bootstrap的Navbar重名，导致你在JSX里写的<Navbar>实际调用的是你自己写的这个组件，不断循环渲染自身，直接造成页面卡死。

1. 调整导入语句，给react-bootstrap的Navbar组件设置别名，避免和自定义组件重名
2. 替换JSX中所有第三方Navbar组件的调用为别名形式
3. 不要忘记在项目入口（比如根目录index.js）全局导入bootstrap的样式文件，否则组件样式不会生效

修正后完整代码 #

//index.js
import React from 'react'
// 导入Navbar并设置别名BsNavbar，避免和自定义组件重名
import { Nav, NavDropdown, Form, FormControl, Button, Navbar as BsNavbar } from "react-bootstrap"
// 也可以直接修改你自定义的组件名，比如改成MyNavbar，就不用设置别名了，二选一即可

function Navbar(){
    return (
      <>
      <BsNavbar bg="light" expand="lg">
        <BsNavbar.Brand href="#">Navbar scroll</BsNavbar.Brand>
        <BsNavbar.Toggle aria-controls="navbarScroll" />
        <BsNavbar.Collapse id="navbarScroll">
          <Nav className="mr-auto my-2 my-lg-0" style={{ maxHeight: '100px' }} navbarScroll >
            <Nav.Link href="#action1">Home</Nav.Link>
            <Nav.Link href="#action2">Link</Nav.Link>
            <NavDropdown title="Link" id="navbarScrollingDropdown">
              <NavDropdown.Item href="#action3">Action</NavDropdown.Item>
              <NavDropdown.Item href="#action4">Another action</NavDropdown.Item>
              <NavDropdown.Divider />
              <NavDropdown.Item href="#action5">Something else here</NavDropdown.Item>
            </NavDropdown>
            <Nav.Link href="#" disabled>
              Link
            </Nav.Link>
          </Nav>
          <Form className="d-flex">
            <FormControl
              type="search"
              placeholder="Search"
              className="mr-2"
              aria-label="Search"
            />
            <Button variant="outline-success">Search</Button>
          </Form>
        </BsNavbar.Collapse>
      </BsNavbar>
      </>
    )
};

如果修改后还是有样式异常，确认你已经安装了bootstrap依赖，并且在项目入口文件加入了导入语句：

import 'bootstrap/dist/css/bootstrap.min.css';

内容的提问来源于stack exchange，提问作者farasatRehmat