Как реализовать navbar с помощью реакции - PullRequest
Новая
       13

Как реализовать navbar с помощью реакции

0 голосов
/ 04 мая 2018

Я пытаюсь самостоятельно изучить 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);

1 Ответ

0 голосов
/ 04 мая 2018

Предполагая, что мы просто с ванильной реакцией, вам сначала нужно определить, что находится в вашей панели навигации. Без всего лишнего пуха, который идет со стилем или другими элементами, чтобы сделать его красивым, панель навигации - это просто список.

Итак, с учетом вышесказанного ваш компонент navbar будет выглядеть так: 

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; }

Источник CSS. А также дальнейшие объяснения того, что делается

Вот приложение, которое приведет к этому: 

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>

В вашем случае вы используете ответную загрузку, которая выполняет большую часть работы. Вам не нужно будет сильно беспокоиться о моделировании или о чем-либо еще, потому что это позаботится об этом за вас.

Если вы загляните сюда в документах о реакции на загрузку , он даст вам готовые компоненты, так что вам не придется делать все эти стили. 

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 - это то, что будет иметь разные страницы. В этом случае вам не нужно беспокоиться о стиле или чем-либо еще, потому что все компоненты реакции-начальной загрузки уже позаботились об этом за вас.

...