Question

我正在努力学习React，但却无法为我的网页创建一个简单的导航栏。我想将导航栏放在index.jsx文件中，以便它显示在页面顶部;下面是我在index.jsx文件中的内容。

import React from 'react'
import { render } from 'react-dom'
import App from './components/App';

const node = document.querySelector('#app')

render(<App />, node);

Answer 1

假设我们只对vanilla做出反应，您首先需要定义导航栏中的内容。如果没有造型或其他元素带来的额外绒毛使其漂亮，导航栏真的只是一个列表。

即便如此，您的导航栏组件将如下所示：

class Navbar extends React.Component{
    render() {
        return (
            <div>
              <ul id="nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">FAQ</a></li>
                <li><a href="#">Contact</a></li>
              </ul>
            </div>
        );
    }
}

现在......你当然想要一个导航栏，而不仅仅是你网站上的一些列表。要实现这一目标，您需要使用一些CSS。

首先，将其设为水平：

#nav {
    width: 100%;
    float: left;
    margin: 0 0 3em 0;
    padding: 0;
    list-style: none; }
#nav li {
    float: left; }

现在将元素分开并稍微装饰它们：

#nav {
    width: 100%;
    float: left;
    margin: 0 0 3em 0;
    padding: 0;
    list-style: none;
    background-color: #f2f2f2;
    border-bottom: 1px solid #ccc; 
    border-top: 1px solid #ccc; }

#nav li a {
        display: block;
        padding: 8px 15px;
        text-decoration: none;
        font-weight: bold;
        color: #069;
        border-right: 1px solid #ccc; }

Source of the CSS. As well as further explanations to what is being done

以下是将导致此问题的应用：

class Navbar extends React.Component{
    render() {
        return (
            <div>
              <ul id="nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">FAQ</a></li>
                <li><a href="#">Contact</a></li>
              </ul>
            </div>
        );
    }
}

class App extends React.Component {
  render () {
    return (
      <div>
        <Navbar/>
        <div>
          [Page content here]
        </div>
      </div>
    )
  }
}



ReactDOM.render(
    <App />,
    document.getElementById('app')
);

#nav {
	width: 100%;
	float: left;
	margin: 0 0 3em 0;
	padding: 0;
	list-style: none; }
#nav li {
	float: left; }

#nav li a {
		display: block;
		padding: 8px 15px;
		text-decoration: none;
		font-weight: bold;
		color: #069;
		border-right: 1px solid #ccc; }

#nav li a {
		display: block;
		padding: 8px 15px;
		text-decoration: none;
		font-weight: bold;
		color: #069;
		border-right: 1px solid #ccc; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

在你的情况下，你正在使用react-bootstrap来完成大部分的工作。你不必担心造型或任何东西，因为它会照顾你。

如果您look here in the react-bootstrap docs，它会为您提供现成的组件，这样您就不必进行所有样式设置。

class MyNavbar extends React.Component{
    render() {
        return (
           <Navbar>
            <Navbar.Header>
              <Navbar.Brand>
                <a href="#home">My Brand</a>
              </Navbar.Brand>
            </Navbar.Header>
            <Nav>
              <NavItem href="#">
                Home
              </NavItem>
              <NavItem href="#">
                About
              </NavItem>
              <NavItem href="#">
                FAQ
              </NavItem>
              <NavItem href="#">
                Contact Us
              </NavItem>
            </Nav>
          </Navbar>
        );
    }
}

所以为了解决这个问题，Navbar组件将包含整个Navbar，它将是它周围的包装器。 NavbarHeader是主要部分，它将保留在导航栏的左侧，通常有您的品牌名称或图标。最后，Nav是具有不同页面的内容。在这种情况下，您不必担心样式或任何东西，因为所有的react-bootstrap组件都已经为您处理过。

如何使用react实现navbar

1 个答案: