React动态添加类名 - 使用className实现样式变化

在React中，可以使用`className`属性来动态增加类名。可以将一个字符串变量赋值给`className`属性，这个字符串变量可以根据组件的状态或属性进行动态修改。\n\n以下是一个示例：\n\njsx\nimport React, { useState } from \"react\";\n\nfunction App() {\n const [isActive, setIsActive] = useState(false);\n\n const handleClick = () => {\n setIsActive(!isActive);\n };\n\n return (\n <div className={isActive ? \"active\" : \""}>\n <button onClick={handleClick}>Toggle</button>\n </div>\n );\n}\n\nexport default App;\n\n\n在这个例子中，我们使用`useState`钩子来跟踪一个名为`isActive`的状态变量。当点击按钮时，调用`handleClick`函数来切换`isActive`的值。通过在`div`元素的`className`属性中使用三元表达式，根据`isActive`的值来动态增加或移除`active`类名。\n\n通过这种方式，我们可以根据组件的状态或属性来动态改变类名，实现样式的动态变化。