Question

我有一个问题。今天，我第一次尝试做出反应。我想制作看起来很漂亮的导航栏。

我打开了该页面：

并复制了一些示例。我将其粘贴到我的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;

输出看起来像这样：

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

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

谢谢您的任何建议！

Answer 1

由于引导程序中的JSX标签实际上是在创建相应的html元素{无序列表，列表项，切换按钮等}，因此我们可以假定引导程序至少已加载。

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

由于React-Bootstrap不依赖于Bootstrap的非常精确的版本，因此我们不附带任何附带的CSS。但是，使用这些组件需要一些样式表。哪种方式以及哪种引导方式取决于您自己，但是最简单的方法是包括CDN中的最新样式。

在此处检查：https://react-bootstrap.github.io/getting-started/introduction/

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

希望这会有所帮助！

Answer 2

将其添加到您来自以下位置的公共index.html样式表链接：count()

Answer 3

public文件夹中的

是index.html文件。我刚刚添加了这一行：

<link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
  integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
  crossorigin="anonymous"
/>

在<head>中工作正常。

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

3 个答案: