当前位置：首页 > React

react实现开关灯

2026-01-27 05:30:20React

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 动画增强视觉效果：

react实现开关灯

.light-on {
  background-color: yellow;
  box-shadow: 0 0 20px yellow;
}

.light-off {
  background-color: #333;
  box-shadow: none;
}

这两种方法都能实现开关灯效果，第一种方式更利于维护复杂的样式，第二种方式更适合简单的样式切换。根据项目需求选择合适的方式即可。

标签: react

分享给朋友：

react 如何分页

分页实现方法在React中实现分页功能可以通过多种方式完成，具体取决于数据来源（如API或本地数据）和UI库的选择。以下是常见的实现方法：使用本地数据分页对于存储在组件状态或Context中…

react 如何跳转

使用 React Router 进行页面跳转 React 应用中通常使用 react-router-dom 库实现页面跳转。以下是几种常见的跳转方式：安装依赖 npm install react…

react项目如何调试

使用浏览器开发者工具 React项目调试最直接的方法是使用浏览器内置的开发者工具（Chrome DevTools/Firefox Developer Tools）。打开开发者工具后，切换到“Sourc…

如何调试react源码

调试React源码的方法克隆React源码仓库到本地： git clone https://github.com/facebook/react.git cd react 安装依赖并构建开发版本：…

react如何渲染图片

在React中渲染图片的方法使用<img>标签直接引入本地图片将图片文件放入项目目录（如src/assets），通过相对路径引入。需注意Webpack可能需要配置file-loader…

react 如何渲染的

React 渲染机制 React 的渲染过程分为两个主要阶段：协调（Reconciliation）和提交（Commit）。协调阶段负责计算差异（Diffing），提交阶段将变化应用到 DOM。虚拟…

react实现开关灯