React实例------红绿灯
概述
一个react的demo的实例，适合初学react的新手练习。
效果
用webpack打包后的目录结构
index.html
react的封装，复用与Java的类似，面向对象的编程思想。所以index首页很简单，因为其他的div已经全部封装到其他js里了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<link href="dscommon.css" rel="stylesheet" tag="themeStyle">
<link href="main.css" rel="stylesheet" tag="themeStyle">
</head>
<body>
<div id="example"></div>
</body>
<script type="text/javascript" src="dscommon.build.js" ></script>
<script type="text/javascript" src="main.build.js"></script>
</html>
TrafficLight类
js的入口。红绿灯和控制按钮。react父组件用state初始化color，props向子组件传递
import React from 'react';
import ReactDOM from 'react-dom';
import AllTrafficLight from "./component/alltrafficLight";
import './style/trafficLightCommon.scss';
import ControlLight from './component/controlLight';
class TrafficLight extends React.Component
{
constructor(props)
{
super(props);
this.state = {color:""};
} getColor(color)
{
this.setState({color:color});
} render()
{
return(
<div className="trafficLightCommon">
<AllTrafficLight color={this.state.color}/>
<ControlLight light={(color)=>{
this.getColor(color);
}}/>
</div>
);
}
} //DOM填充
ReactDOM.render(
<TrafficLight/>,
document.getElementById("example")
);
AllTrafficLight类
红绿灯界面，通过右侧的按钮来控制红绿灯的关闭，当然也可以自己改进，通过时间来控制
import React from 'react';
import TrafficLightItem from "./trafficLightItem";
import './style/trafficLight.scss';
export default class AlltrafficLight extends React.Component
{
getRealColor()
{
return this.props.color?this.props.color:"all";
} getIsLight(num)
{
switch (num)
{
case 1:
if (this.getRealColor() == "red" || this.getRealColor() == "all")
{
return true;
}
break;
case 2:
if (this.getRealColor() == "yellow" || this.getRealColor() == "all")
{
return true;
}
break;
case 3:
if (this.getRealColor() == "green" || this.getRealColor() == "all")
{
return true;
}
break;
}
return false;
} render()
{
return(
<div className="getAllTrafficLight">
<TrafficLightItem color="red" isLight={this.getIsLight(1)}/>
<TrafficLightItem color="yellow" isLight={this.getIsLight(2)}/>
<TrafficLightItem color="green" isLight={this.getIsLight(3)}/>
</div>
);
}
}
TrafficLightItem类
import React from 'react';
import './style/trafficLight.scss';
export default class TrafficLightItem extends React.Component
{
get getPropsColor(){
return this.props.color ? this.props.color:""
}
get getPropsIsLight(){
return this.props.isLight ? this.props.isLight:false
} render() {
return (
<div className="trafficLightItem" style={{backgroundColor:this.getPropsIsLight === true?this.getPropsColor:"",border:"1px solid "+this.getPropsColor}}/>
);
}
}
ControlLight类
通过点击控制灯的颜色
import React from 'react';
import './style/trafficLight.scss';
export default class ControlLight extends React.Component
{
getLight(color)
{
return this.props.light(color);
} getDom()
{
let dom = [];
dom.push(
<div className="controlButton" key="red_key" onClick={()=>{this.getLight("red")}}>红灯亮</div>,
<div className="controlButton" key="yellow_key" onClick={()=>{this.getLight("yellow")}}>黄灯亮</div>,
<div className="controlButton" key="green_key" onClick={()=>{this.getLight("green")}}>绿灯亮</div>,
<div className="controlButton" key="no_key" onClick={()=>{this.getLight("no")}}>全不亮</div>,
<div className="controlButton" key="all_key" onClick={()=>{this.getLight("all")}}>全都亮</div>
);
return dom; } render()
{
return(
<div className="controlLight">
{this.getDom()}
</div>
);
}
}
红绿的和按钮的样式
trafficLightCommon.scss
.trafficLightCommon{
margin: 10rem auto;
width: 30rem;
}
trafficLight.scss
.getAllTrafficLight
{
@extend .controlLight;
.trafficLightItem
{
width: 5rem;
height: 5rem;
border-radius: 25%;
margin-top: 1.5rem;
}
} .controlLight
{
padding: 0 1rem 1rem 1rem;
display: inline-block;
background-color: #5b9bd5;
vertical-align: top;
margin-left: 3rem;
.controlButton
{
background-color: #b6b8e9;
font-size: 1rem;
color: black;
padding: 0.5rem;
margin-top: 1.6rem;
cursor: pointer;
}
}
webpack打包的入口文件配置
dscommon.js
import 'createjs';
main.js
import '../scripts/trafficLight.js';
自动切换红绿灯trunColor
turnColor () {
setTimeout(()=>{
this.setState({color:"red"});
setTimeout(()=>{
this.setState({color:"yellow"});
// 递归执行方法
setTimeout(()=>{
this.setState({color:"green"});
this.turnColor();
}, 10000)
}, 7000)
}, 8000)
}
打包 webpack-w。。。
======================================================
如发现错误，请及时留言，lz及时修改，避免误导后来者。感谢！！！
React实例------红绿灯的更多相关文章
- react实例之todo,做一个实时响应的列表操作
react实例之todo, 做一个实时响应的列表操作 在所有的mvc框架中,最常见的例子不是hello world,而是todo,由于reactjs的简单性,在不引用flux和redux的情况下,我们 ...
- React实例入门教程(1)基础API,JSX语法--hello world
前 言 毫无疑问,react是目前最最热门的框架(没有之一),了解并学习使用React,可以说是现在每个前端工程师都需要的. 在前端领域,一个框架为何会如此之火爆,无外乎两个原因:性能优秀,开发 ...
- 【原创】React实例入门教程(1)基础API,JSX语法--hello world
前 言 毫无疑问,react是目前最最热门的框架(没有之一),了解并学习使用React,可以说是现在每个前端工程师都需要的. 在前端领域,一个框架为何会如此之火爆,无外乎两个原因:性能优秀,开发效率 ...
- React学习笔记-1-什么是react，react环境搭建以及第一个react实例
什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似. ...
- React实例----一个表单验证比较复杂的页面
前言:这阵子看了两本CSS的书~对于CSS层叠,定位,继承等机制基本上都了解了,就想着自己写几个页面~正好自己就写了写CSS样式,然后用React渲染出来~ 闲话不多说,简单说一说这个页面,希望能对大 ...
- react实例：理解dva构建项目的原理
请点击相应的步骤查看详情 我们首先搭建一个 dva Demo 项目(请参考react快速构建一个应用项目),然后逐步完成以下内容: 结构划分 设计 Model 组件设计方法 组件设计实践 添加 Re ...
- 一个简单的 react 实例： < TodoList >
< react TodoList: > 组件: //引入React : import React from 'react'; //组件 class TodoList exten ...
- React.js入门小案例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
- [转] React同构思想
React比较吸引我的地方在于其客户端-服务端同构特性,服务端-客户端可复用组件,本文来简单介绍下这一架构思想. 出于篇幅原因,本文不会介绍React基础,所以,如果你还不清楚React的state/ ...
随机推荐
- kubernetes集群内通过endpoint访问外部服务
kubernetes内的服务访问集群外独立的服务最好通过endpoint方式,例如MySQL 1.创建mysql-service.yaml apiVersion: v1 kind: Service m ...
- PHP获取当前服务器版本，Ip等详细信息
1. 服务器IP地址 $_SERVER['SERVER_ADDR'] 服务器域名 $_SERVER['SERVER_NAME'] 服务器端口 $_SERVER['SERVER_PORT'] 服务器版本 ...
- LOJ 3156: 「NOI2019」回家路线
题目传送门:LOJ #3156. 题意简述: 有一张 \(n\) 个点 \(m\) 条边的有向图,边有两个权值 \(p_i\) 和 \(q_i\)(\(p_i<q_i\))表示若 \(p_i\) ...
- mysql5.6采集数据插入出现MySQL server has gone away解决办法
当做网站有一个站要用到WEB网页采集器功能,当一个PHP脚本在请求URL的时候,可能这个被请求的网页非常慢慢,超过了mysql的 wait-timeout时间,然后当网页内容被抓回来后,准备插入到My ...
- 洛谷 P1167 刷题
洛谷 P1167 刷题 洛谷传送门 题目描述 noip临近了,小A却发现他已经不会写题了.好在现在离竞赛还有一段时间,小A决定从现在开始夜以继日地刷题.也就是说小A废寝忘食,一天二十四小时地刷题. 今 ...
- 每天一道Rust-LeetCode(2019-06-01)
每天一道Rust-LeetCode(2019-06-01) 坚持每天一道题,刷题学习Rust. 题目描述 给出两个 非空 的链表用来表示两个非负的整数.其中,它们各自的位数是按照 逆序 的方式存储的, ...
- Mongo 服务器的安装
MongoDB的安装 CentOS 中使用yum安装: touch /etc/yum.repos.d/mongodb-org-4.2.repo vim /etc/yum.repos.d/mongodb ...
- <虚树+树型DP> SDOI2011消耗战
<虚树+树型DP> SDOI2011消耗战 #include <iostream> #include <cstdio> #include <cstring&g ...
- [RN] React Native Image 实现placeholder占位图
React Native Image 实现placeholder占位图 react-native Image没有placeholder这样的props,但是业务有需要这种场景, 解决方法为: 使用Im ...
- linux网络编程之用socket实现简单客户端和服务端的通信（基于UDP）
单客户端和服务端的通信(基于UDP) 代码 服务端代码socket3.c #include<sys/types.h> #include<sys/socket.h> #inc ...