React 中的導航欄
我們將演示如何在 React 中建立導航欄。
React 中的導航欄
導航欄是 GUI 的一部分,旨在幫助訪問者訪問你網站的資訊。
我們將首先在 CLI 中使用 npx
建立一個新專案以建立一個導航欄。
# CLI
npx create-react-app navigation
或者使用 npm
。
# CLI
npm init create-react-app navigation
或者使用 yarn
。
# CLI
yarn create react-app navigation
一旦我們在 React 中建立了一個新專案。我們將在 VS Code 中開啟它,方法是進入 navigation
目錄並輸入以下命令。
# CLI
cd navigation
code .
使用終端,我們可以啟動我們的應用程式。
# React Terminal
npm start
讓我們在 src
資料夾中建立一個新的 components
資料夾。在 components
資料夾中,我們需要建立另一個 Navbar
資料夾。在 Navbar
資料夾中,讓我們建立兩個名為 Navbar.js
和 Navbar.css
的新檔案。
在 Navbar.js
中,我們必須從 React 匯入 React
和 Component
並建立 Navbar
類。
Navbar.js
中的程式碼將如下所示。
# react
import React, { Component } from "react";
export class Navbar extends Component{
render(){
return{
}
}
}
讓我們返回一個基本的導航欄。
# react
import React from "react";
import { MenuItems } from "./MenuItems";
import { Nav } from "react-bootstrap";
export default function Navbar() {
return (
<Nav className="NavbarItems">
<h1 className="Navbar-logo">React</h1>
<div className="menu-icon"></div>
<ul>
<li><a href="#"></a></li>
</ul>
</Nav>
);
}
我們將建立另一個名為 MenuItems.js
的檔案來定義選單項陣列。如果我們以後想改變它,我們可以很容易地從一個檔案中改變它。
MenuItems.js
中的程式碼將如下所示。
# react
export const MenuItems = [
{
Title: "Home",
url: "#",
cName: "nav-links"
},
{
Title: "About Us",
url: "#",
cName: "nav-links"
},
{
Title: "Our Services",
url: "#",
cName: "nav-links"
},
{
Title: "Contact Us",
url: "#",
cName: "nav-links"
},
{
Title: "Sign Up",
url: "#",
cName: "nav-links-mobile"
}
];
title
將是選單項的名稱,而 URL
將是該頁面的連結,cName
將是類名。我們可以根據需要為任意數量的選單項複製和貼上此結構。最後一項是移動選單,所以新增 nav-links-mobile
。
我們將把 MenuItems
匯入 Navbar.js
。
# react
import { MenuItems } from "MenuItems"
我們將對映 MenuItems
。Navbar.js
看起來像這樣。
# react
import React from "react";
import { MenuItems } from "./MenuItems";
import { Nav } from "react-bootstrap";
export default function Navbar() {
return (
<Nav className="NavbarItems">
<h1 className="Navbar-logo">React</h1>
<div className="menu-icon"></div>
<ul>
{MenuItems.map((item, index) => {
return (
<li key={index}>
<a className={item.cName} href={item.url}>
{item.Title}
</a>
</li>
);
})}
</ul>
</Nav>
);
}
我們將在 App.js
中匯入 Navbar.js
。
# react
import "./styles.css";
import Navbar from "./components/Navbar/Navbar";
export default function App() {
return (
<div className="App">
<Navbar />
</div>
);
}
輸出:
讓我們新增一些 CSS 程式碼,讓它看起來像一個導航選單。
# react
body {
margin: 0;
padding: 0;
}
.NavbarItems {
background-color: black;
margin: 0;
padding: 0;
height: 80px;
}
.NavbarItems h1 {
color: white;
padding: 10px;
font-size: 25px;
}
.logo {
width: 20%;
float: left;
}
.navbar-ul {
width: 80%;
float: left;
list-style: none;
margin: 0px;
padding: 0;
}
li {
display: inline;
list-style: none;
font-size: 18px;
padding: 10px;
line-height: 80px;
}
.nav-links {
color: white;
text-decoration: none;
}
.nav-links-mobile {
color: white;
text-decoration: none;
}
li:hover {
background-color: white;
}
li:hover .nav-links {
color: black;
}
li:hover .nav-links-mobile {
color: black;
}
輸出:
這就是我們如何在 React 中進行導航並使用元件將其匯入任何頁面的方式。
Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.
LinkedIn