当前位置：首页 > React

react实现开关灯

2026-01-27 05:30:20React

React 实现开关灯效果

在 React 中实现开关灯效果可以通过状态管理来控制组件的样式或类名切换。以下是两种常见的实现方式：

使用状态切换类名

通过 useState 管理开关状态，动态切换 CSS 类名：

react实现开关灯

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 文件：

react实现开关灯

.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;
}

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

标签: react

分享给朋友：

react 如何引入jquery

引入 jQuery 到 React 项目在 React 项目中引入 jQuery 可以通过多种方式实现，但需要注意 React 和 jQuery 操作 DOM 的方式可能冲突，因此建议仅在必要时使用…

react如何衰减

React 中的动画衰减效果实现在 React 中实现衰减效果（如滚动衰减、拖动释放后的惯性滑动）通常需要结合物理动画原理或第三方动画库。以下是几种常见方法：使用 CSS 动画和 @keyfra…

react如何收录

React 收录方法 React 的收录主要涉及搜索引擎优化（SEO）和预渲染技术。由于 React 是单页应用（SPA），默认情况下内容由 JavaScript 动态生成，可能导致搜索引擎爬虫难以收…

react如何安装

安装React的步骤确保已安装Node.js（建议版本12或更高），可通过以下命令检查版本： node -v npm -v 使用Create React App快速搭建项目（推荐）： npx c…

react如何注销

React 组件的注销方法在 React 中，组件的注销通常指的是在组件卸载时执行清理操作，例如取消订阅、清除定时器或释放资源。以下是几种常见的方法：使用 useEffect 钩子的清理函数…

如何关闭react

关闭React应用的步骤在开发或运行React应用时，可能需要关闭正在运行的开发服务器或停止应用。以下是几种常见情况的处理方法：停止开发服务器如果正在使用npm start或yarn star…

react实现开关灯