我有以下內容：
（我已經洗掉了所有其他代碼，只包含了相關位）
import { Link } from 'react-router-dom';
function Main() {
return (
<>
<div id="nav">
<Link to="/"><div id="one" class="active"></div></Link>
<Link to="/"><div id="two"></div></Link>
<Link to="/"><div id="three"></div></Link>
<Link to="/"><div id="four"></div></Link>
</div>
</>
);
}
export default Main;
我想要的是當用戶單擊時，例如，<div id="two">活動類被洗掉<div id="one">并添加到兩個。
uj5u.com熱心網友回復：
使用NavLink組件，它的幾個 props 可以使用一個傳遞isActive屬性的回呼函式。
interface NavLinkProps extends Omit< LinkProps, "className" | "style" | "children" > { caseSensitive?: boolean; children?: | React.ReactNode | ((props: { isActive: boolean }) => React.ReactNode); className?: | string | ((props: { isActive: boolean; }) => string | undefined); end?: boolean; style?: | React.CSSProperties | ((props: { isActive: boolean; }) => React.CSSProperties); }
使用children函式 prop 接受isActive可用于有條件地將 CSS/邏輯/等應用到子組件的屬性。
例子：
import { NavLink } from 'react-router-dom';
...
<NavLink to="/">
{({ isActive }) => (
<div
id="one"
class={isActive ? "active" : ""}
>
</div>
)}
</NavLink>
<NavLink to="/">
{({ isActive }) => (
<div
id="two"
class={isActive ? "active" : ""}
>
</div>
)}
</NavLink>
...
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/521747.html