我的回應式導航欄有問題。當我點擊漢堡選單時，它會將我重定向到一個空白頁面，沒有任何其他內容。問題是什么？我是新手，我知道我應該采取另一種方法來解決這個問題。我試圖在 youtube 上找到一些教程，但它們都是使用樣式組件制作的。現在我更喜歡堅持使用 css。
這是我的反應組件
import React, {useState} from 'react'
import './navbar.css'
import ProfileIcon from '../../assets/profileIcon.svg'
function Navbar() {
const [showMenu, setShowMenu] = useState(false)
const navMenu = document.querySelector('.nav-menu')
if(showMenu) {
return navMenu;
}
return (
<nav className="navbar">
{/* logo */}
<a href="#" className="nav-logo nav-a">Logo</a>
{/* navbar buttons */}
<ul className="nav-menu">
<li className="nav-item nav-li">
<a href="#" className="nav-link nav-a">Components</a>
</li>
<li className="nav-item nav-li">
<a href="#" className="nav-link nav-a">Articles</a>
</li>
<li className="nav-item nav-li">
<a href="#" className="nav-link nav-a">About</a>
</li>
</ul>
<img src={ ProfileIcon } className="profile-icon" alt="profile-icon"></img>
{/* hamburger menu */}
<div className="hamburger" onClick={() => setShowMenu(!showMenu)}>
<span className="bar"></span>
<span className="bar"></span>
<span className="bar"></span>
</div>
</nav>
)
}
export default Navbar
這是 css 檔案
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
height: 10vh;
background-color: lightcyan;
padding-left: 20px;
padding-right: 20px;
}
.nav-li {
list-style: none;
cursor: pointer;
margin: 5px 10px;
padding: 5px 10px;
}
.nav-a {
text-decoration: none;
color: black;
}
.nav-link:hover {
color: red;
}
.profile-icon {
width: 20px;
height: 20px;
cursor: pointer;
}
.bar {
display: block;
width: 25px;
height: 3px;
margin: 5px auto;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background-color: #101010;
}
.hamburger {
display: none;
}
.nav-menu {
display: flex;
justify-content: space-between;
align-items: center;
width: 30rem;
}
.nav-logo {
font-weight: 700;
font-size: 2.1rem;
}
.nav-link{
font-size: 1rem;
font-weight: 400;
color: black;
}
@media only screen and (max-width: 768px) {
.nav-menu {
position: fixed;
left: -100%;
top: 4rem;
flex-direction: column;
background-color: lightgreen;
width: 100%;
text-align: center;
transition: 0.3s;
box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
}
.nav-menu.active {
left: 0;
}
.nav-item {
margin: 2.5rem 0;
}
.hamburger {
display: block;
cursor: pointer;
}
.hamburger.active .bar:nth-child(2) {
opacity: 0;
}
.hamburger.active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.hamburger.active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
}
uj5u.com熱心網友回復：
React 元素 ( <nav>) 不是 DOM 節點。它們是普通的 js 資料結構。你不能從 react 組件回傳真正的 DOM 集合。
相反，您需要回傳狀態的正確 UI 表示的值。例如像下面這樣。
此外，如果下一個狀態取決于前一個狀態，您應該使用setStateie 的回呼形式setShowMenu(showMenu => !showMenu)
import React, {useState} from 'react'
import './navbar.css'
import ProfileIcon from '../../assets/profileIcon.svg'
function Navbar() {
const [showMenu, setShowMenu] = useState(false)
return (
<nav className="navbar">
{/* logo */}
<a href="#" className="nav-logo nav-a">Logo</a>
{/* navbar buttons */}
{showMenu && (
<ul className="nav-menu">
<li className="nav-item nav-li">
<a href="#" className="nav-link nav-a">Components</a>
</li>
<li className="nav-item nav-li">
<a href="#" className="nav-link nav-a">Articles</a>
</li>
<li className="nav-item nav-li">
<a href="#" className="nav-link nav-a">About</a>
</li>
</ul>)}
<img src={ ProfileIcon } className="profile-icon" alt="profile-icon"></img>
{/* hamburger menu */}
<div className="hamburger" onClick={() => setShowMenu(showMenu => !showMenu)}>
<span className="bar"></span>
<span className="bar"></span>
<span className="bar"></span>
</div>
</nav>
)
}
export default Navbaruj5u.com熱心網友回復：
當有人點擊漢堡選單時，您將 showMenu 設定為 true，因此組件會重新渲染（因為 showMenu 是一種狀態）首先它會看到您的 if 陳述句；條件為真，所以進去看看return陳述句，所以回傳了navMenu，但是你沒有定義navMenu，navMenu不能是組件（小寫開頭，組件必須大寫開頭）所以它只呈現你的 navMenu 而你的 navMenu 什么都不是！所以你會看到一個空白頁。
您需要在回傳時有條件地呈現選單，而不是單獨呈現。
import React, {useState} from 'react'
import './navbar.css'
import ProfileIcon from '../../assets/profileIcon.svg'
function Navbar() {
const [showMenu, setShowMenu] = useState(false)
return (
<nav className="navbar">
{/* logo */}
<a href="#" className="nav-logo nav-a">Logo</a>
{/* navbar buttons */}
{showMenu && (<ul className="nav-menu">
<li className="nav-item nav-li">
<a href="#" className="nav-link nav-a">Components</a>
</li>
<li className="nav-item nav-li">
<a href="#" className="nav-link nav-a">Articles</a>
</li>
<li className="nav-item nav-li">
<a href="#" className="nav-link nav-a">About</a>
</li>
</ul>)}
<img src={ ProfileIcon } className="profile-icon" alt="profile-icon"></img>
{/* hamburger menu */}
<div className="hamburger" onClick={() => setShowMenu(!showMenu)}>
<span className="bar"></span>
<span className="bar"></span>
<span className="bar"></span>
</div>
</nav>
)
}
export default Navbar
uj5u.com熱心網友回復：
在 React 中，組件渲染的是propsand的宣告性函式state。
通常不需要使用document.querySelectorDOM 做任何事情。
相反，使用showMenu狀態值有條件地隱藏、顯示或更改各種元素的屬性。
在下面的示例中，我添加和洗掉了 "active" className)。
import "./styles.css";
import React, { useState } from "react";
function Navbar() {
const [showMenu, setShowMenu] = useState(false);
return (
<nav className={`navbar`}>
{/* navbar buttons */}
<ul className={`nav-menu ${showMenu && "active"}`}></ul>
{/* hamburger menu */}
<button className="hamburger" onClick={() => setShowMenu(!showMenu)}>
hamburger
</button>
</nav>
);
}
export default Navbar;
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/346428.html
標籤：javascript 反应 反应还原 反应钩子
上一篇：遞回flatMap