如何使用 onclick() 从 React 组件中添加和删除 className？

Question

如何使用 onclick() 从组件中删除和添加 className？

在下面的示例中，我想单击正方形并删除 className .red-square，然后使用 onclick() 添加 className .green-square

Answer 1

import { useState } from "react";

const App = () => {
    const [isRed, setIsRed] = useState(true);

    const handleClick = () => setIsRed(!isRed);

    return <div 
               onClick={handleClick} 
               className={isRed ? "red-square" : "green-square"}>
           </div>
}