react实现开关灯
React 实现开关灯效果
在 React 中实现开关灯效果可以通过状态管理来控制组件的样式或类名切换。以下是两种常见的实现方式：
使用状态切换类名
通过 useState 管理开关状态，动态切换 CSS 类名：
import React, { useState } from 'react';
import './LightSwitch.css';
function LightSwitch() {
const [isOn, setIsOn] = useState(false);
const toggleLight = () => {
setIsOn(!isOn);
};
return (
<div className={`room ${isOn ? 'light-on' : 'light-off'}`}>
<button onClick={toggleLight}>
{isOn ? 'Turn Off' : 'Turn On'}
</button>
</div>
);
}
export default LightSwitch;对应的 CSS 文件：
.room {
width: 200px;
height: 200px;
transition: background-color 0.3s;
}
.light-on {
background-color: yellow;
}
.light-off {
background-color: #333;
}
button {
margin-top: 20px;
padding: 10px 20px;
}使用内联样式
直接通过状态改变内联样式：
import React, { useState } from 'react';
function LightSwitch() {
const [isOn, setIsOn] = useState(false);
const roomStyle = {
width: '200px',
height: '200px',
backgroundColor: isOn ? 'yellow' : '#333',
transition: 'background-color 0.3s'
};
return (
<div style={roomStyle}>
<button onClick={() => setIsOn(!isOn)}>
{isOn ? 'Turn Off' : 'Turn On'}
</button>
</div>
);
}
export default LightSwitch;添加动画效果
可以使用 CSS 动画增强视觉效果：
.light-on {
background-color: yellow;
box-shadow: 0 0 20px yellow;
}
.light-off {
background-color: #333;
box-shadow: none;
}这两种方法都能实现开关灯效果，第一种方式更利于维护复杂的样式，第二种方式更适合简单的样式切换。根据项目需求选择合适的方式即可。
