javascript - React - 复制粘贴导航栏示例的问题

Question

我有一个问题。今天我第一次尝试使用react。我想制作漂亮的导航栏。

我打开那个页面:

NavBar React example

并复制了一些例子。我将它粘贴到我的 App.js 文件中。现在，它看起来像这样:

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import { Navbar, Nav, NavItem, NavDropdown, MenuItem } from "react-bootstrap";

class App extends Component {
  render() {
    return (
      <div className="App">
        //here i posted my navbar
        <Navbar inverse collapseOnSelect>
          <Navbar.Header>
            <Navbar.Brand>
              <a href="#brand">React-Bootstrap</a>
            </Navbar.Brand>
            <Navbar.Toggle />
          </Navbar.Header>
          <Navbar.Collapse>
            <Nav>
              <NavItem eventKey={1} href="#">
                Link
              </NavItem>
              <NavItem eventKey={2} href="#">
                Link
              </NavItem>
              <NavDropdown
                eventKey={3}
                title="Dropdown"
                id="basic-nav-dropdown"
              >
                <MenuItem eventKey={3.1}>Action</MenuItem>
                <MenuItem eventKey={3.2}>Another action</MenuItem>
                <MenuItem eventKey={3.3}>Something else here</MenuItem>
                <MenuItem divider />
                <MenuItem eventKey={3.3}>Separated link</MenuItem>
              </NavDropdown>
            </Nav>
            <Nav pullRight>
              <NavItem eventKey={1} href="#">
                Link Right
              </NavItem>
              <NavItem eventKey={2} href="#">
                Link Right
              </NavItem>
            </Nav>
          </Navbar.Collapse>
        </Navbar>
        ;
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

export default App;

输出如下:

你能告诉我，我忘记了什么吗？我是网络应用程序的新手，所以请耐心等待。当然，我会将导航栏移动到单独的组件，但现在，我想看看它是如何工作的。

我的 Chrome 控制台出现任何错误

感谢您的任何建议!

Answer 1

由于来自 bootstrap 的 JSX 标签实际上创建了相应的 html 元素{无序列表、列表项、切换按钮等}，我们可以假设 bootstrap 至少已加载。

您应该检查控制台以检查这些元素是否引入了 Bootstrap 样式。如果不是，请注意 react-bootstrap 文档中的以下内容:

Because React-Bootstrap doesn't depend on a very precise version of Bootstrap, we don't ship with any included css. However, some stylesheet is required to use these components. How and which bootstrap styles you include is up to you, but the simplest way is to include the latest styles from the CDN.

在这里查看:https://react-bootstrap.github.io/getting-started/introduction/

此外，导航栏结束标记末尾有一个随机分号*

希望这对您有所帮助!