删除div中所有子元素的类，并将类添加到单击的div中

Question

我有以下内容：

(我已经删除了所有其他代码，只包含了相关的位(

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">中删除并添加到两个。

Answer 1

使用NavLink组件，它的几个道具可以使用传递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);
}

使用接受isActive属性的children函数道具，该属性可用于有条件地将CSS/logic等应用于子组件。

示例：

import { NavLink } from 'react-router-dom';
...
<NavLink to="/" end> // <-- end prop to match "/" when not on sub-route
{({ isActive }) => (
<div
id="one"
class={isActive ? "active" : ""}
>
</div>
)}
</NavLink>
<NavLink to="/">
{({ isActive }) => (
<div
id="two"
class={isActive ? "active" : ""}
>
</div>
)}
</NavLink>
...