概述

一个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实例------红绿灯的更多相关文章

  1. react实例之todo,做一个实时响应的列表操作

    react实例之todo, 做一个实时响应的列表操作 在所有的mvc框架中,最常见的例子不是hello world,而是todo,由于reactjs的简单性,在不引用flux和redux的情况下,我们 ...

  2. React实例入门教程(1)基础API,JSX语法--hello world

      前  言 毫无疑问,react是目前最最热门的框架(没有之一),了解并学习使用React,可以说是现在每个前端工程师都需要的. 在前端领域,一个框架为何会如此之火爆,无外乎两个原因:性能优秀,开发 ...

  3. 【原创】React实例入门教程(1)基础API,JSX语法--hello world

    前  言 毫无疑问,react是目前最最热门的框架(没有之一),了解并学习使用React,可以说是现在每个前端工程师都需要的. 在前端领域,一个框架为何会如此之火爆,无外乎两个原因:性能优秀,开发效率 ...

  4. React学习笔记-1-什么是react，react环境搭建以及第一个react实例

    什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似. ...

  5. React实例----一个表单验证比较复杂的页面

    前言:这阵子看了两本CSS的书~对于CSS层叠,定位,继承等机制基本上都了解了,就想着自己写几个页面~正好自己就写了写CSS样式,然后用React渲染出来~ 闲话不多说,简单说一说这个页面,希望能对大 ...

  6. react实例：理解dva构建项目的原理

    请点击相应的步骤查看详情 我们首先搭建一个 dva Demo  项目(请参考react快速构建一个应用项目),然后逐步完成以下内容: 结构划分 设计 Model 组件设计方法 组件设计实践 添加 Re ...

  7. 一个简单的 react 实例： < TodoList >

    <  react     TodoList:  > 组件: //引入React : import React from 'react'; //组件 class TodoList exten ...

  8. React.js入门小案例

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

  9. [转] React同构思想

    React比较吸引我的地方在于其客户端-服务端同构特性,服务端-客户端可复用组件,本文来简单介绍下这一架构思想. 出于篇幅原因,本文不会介绍React基础,所以,如果你还不清楚React的state/ ...

随机推荐

  1. 安装gcc-c++报错解决办法

    问题 每次安装依赖包gcc-c++的时候,经常会遇到包如下错误   Error: Package: libstdc++-devel--.el7_4..x86_64 (ultra-centos-7.4- ...

  2. RMAN笔记

    Rman常用命令 Preview选项 1)    显示用于还原system表空间数据文件的备份文件 RMAN> restore datafile 2 preview; 2)    显示用于还原特 ...

  3. MySQL数据库（三）--表相关操作（二）之约束条件、关联关系、复制表

    一.约束条件  1.何为约束 除了数据类型以外额外添加的约束 2.约束条件的作用 为了保证数据的合法性,完整性 3.主要的约束条件 NOT NULL # 标识该字段不能为空,默认NULL,可设置NOT ...

  4. Nginx 核心配置-检测文件是否存在

    Nginx 核心配置-检测文件是否存在 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. try_files会按顺序检查文件是否存在,返回第一个找到的文件或文件夹(结尾加斜线表示为文件 ...

  5. mac运行模拟器simulator突然很慢

    一直都正常,突然变慢,而且慢的离谱. 上网查了下,这里记录下,或许问题不仅限于此. simulator->Debug->Slow Animations. 这个Slow Animations ...

  6. Comet OJ 夏季欢乐赛 完全k叉树

    完全k叉树 https://cometoj.com/contest/59/problem/A?problem_id=2712 题目描述 欢迎报考JWJU!这里有丰富的社团活动,比如为梦想奋斗的ACM集 ...

  7. python基础之八：知识小结及补充

    一.python2 与python3 的区别 1.在2中print后可带扣号,也可不带,3中必须带,否则报错! #print 'hello python2' print('hello python3' ...

  8. 用bitSet做百万级ip去重

    如果直接将几百万数据仍到bitset,内存是否够用?实际测试,600万ip放到一个bitSet中,jvm内存会爆. 所以,就简单做了下分组,构建一个HashMap<String, BitSet& ...

  9. CF 494E Sharti

    CF 494E Sharti 题意:一个\(n \times n\)的棋盘,共有m个矩形中的格子为白色.两个人需要博弈,每次操作选择一个边长不超过k的正方形并翻转颜色,每次翻转需要正方形的右下角为白色 ...

  10. python: 添加自定义模块路径 —— 可以使用相对路径

    自定义模块时,添加模块路径: sys.path.append('..')