我想制作類似于reactjs.org中的導航選單。 我正在使用Header組件和導航，它是帶有鏈接和名稱的物件。我正在使用狀態添加onClick類，但這將切換所有按鈕。
import React, { useState } from "react"。
import styles from "./index.module.css"。
import getNavigation from "././utils/navigation"。
import { Link } from "react-router-dom"。
import logo from "././images/europa-logo.png"。
const Header = (/span>) => {
const links = getNavigation();
const [isActive, setActive] = useState(false)。
const toggleClass = (/span>) => {
setActive(!isActive)。
};
return (
<div>
<nav className={styles.topnav}>/span>
<div className={styles.pageWrapper}>/span>
< img src={logo} alt="Logo" />
<ul>
{links.map((l, i) => (
<li key={i}>
<Link
className={isActive ? "btn-active" : null}。
onClick={toggleClass}。
to={l.link}>
value={l.title}
>
{l.title}
</Link>
</li>
))}
<li>
{" "}
<div className={styles.social}>
<a href="https://facebook.com"/span>>
<FontAwesomeIcon。
size="2x"/span>
icon={["fab", "facebook-square"]}。
/>{" "}
</a>
<a href="mailto:[email protected]"/span>>
< FontAwesomeIcon size="2x" icon="envelope" />
</a>
</div>/span>
</li>
</ul>/span>
</div>/span>
</nav>
</div>
);
};
export default Header;
結果是所有按鈕都被激活。
我的目標是只激活被點擊的鏈接，導航選單的第一個按鈕需要默認激活。我做錯了什么呢？
uj5u.com熱心網友回復：
你可以使用<NavLink>而不是簡單的<Link>。
是一個特殊的版本，當它與當前的URL相匹配時，將為渲染的元素添加造型屬性。
<NavLink to="/"/span> activeClassName="active"/span>>。 Link</NavLink>
你可以在這里查看檔案。 https://github.com/remix-run/react-router/blob/main/packages/react-router-dom/docs/api/NavLink.md
uj5u.com熱心網友回復：
你可以定義活動索引，你的條件看起來像這樣
className={activeIndex == i ? "btn-active" : ""}。
切換類功能：
const [activeIndex, setActiveIndex] = useState（0）。
const toggleClass=（i）=> {
setActiveIndex（i）。
};
和onClick將看起來像這樣
onClick={()=>{toggleClass(i); }}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/306999.html
標籤：