Question

我的应用无法启动。现在，导航栏看起来不应该了

我的项目遇到了麻烦。每当我输入npm start时，它都会尝试加载，但不可避免地会说aww snap出了点问题。我问这里该怎么做，我得到了将代码更改为

所需的答案。

UITableViewAutomaticDimension

Answer 1

只需复制您的代码即可。在我看来很好。这不是您想要的吗？

const {Nav, Navbar, Button, FormControl, Form, NavDropdown} = ReactBootstrap;

const CustomNavbar = () => (
  <Navbar bg="light" expand="lg">
    <Navbar.Brand href="#home">Pawsitively Delicious</Navbar.Brand>
    <Navbar.Toggle aria-controls="basic-navbar-nav" />
    <Navbar.Collapse id="basic-navbar-nav">
      <Nav className="mr-auto">
        <Nav.Link href="/">Home</Nav.Link>
        <Nav.Link href="AboutUs.js">About Us</Nav.Link>
        <NavDropdown title="Ingredients" id="basic-nav-dropdown">
          <NavDropdown.Item href="./TypesOfDogTreats">
            Types of Dog Treats
          </NavDropdown.Item>
          <NavDropdown.Item href="AllIngredients.js">
            Ingredients
          </NavDropdown.Item>
        </NavDropdown>
      </Nav>
      <Form inline>
        <FormControl type="text" placeholder="Search" className="mr-sm-2" />
        <Button variant="outline-success">Search</Button>
      </Form>
    </Navbar.Collapse>
  </Navbar>
);
ReactDOM.render(<CustomNavbar />, document.getElementById("react"))

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<script src="https://unpkg.com/react/umd/react.production.min.js" crossorigin></script>

<script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js" crossorigin></script>

<script src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js" crossorigin></script>

<script>
  var Alert = ReactBootstrap.Alert;
</script>

反应导航栏无法正确显示

1 个答案: