如何为组件 class 使用 reactjs 状态？

Question

我有一个侧边栏组件，并且在 React 中准备了 css（.sidebar.active 是 class 每当显示侧边栏时）：

export default function Sidebar() {
   return (
     <div className="sidebar">This is a sidebar</div>
   )
}

我想在 React 中保存边栏为 toggled/active 的状态，因为这不是 class 我将不得不使用 useState 钩子，对吗？所以它可能看起来像这样：

export default function Sidebar() {
   const [toggled, setToggled] = useState();

   return (
     <div className="sidebar">This is a sidebar</div>
   )
}

如何动态地add/remove .active class？我正在考虑添加额外的字符串，例如：

<div className="sidebar {toggled}">This is a sidebar</div>

所以 toggled 是空字符串或 active。什么是正确的方法？有没有一种方法可以让我从 DOM 元素的 classList 动态地 add/remove class？提前致谢！

Answer 1

您可以使用 Ternary Operator 切换班级列表。

export default function Sidebar() {
const [toggled, setToggled] = useState(false);

return (
 <div className={toggled ? "sidebar active" : "sidebar"}>This is a sidebar</div>
)}

如何为组件 class 使用 reactjs 状态？

How can I use reactjs state for component class?

reactjs

class

components

state