概述

一个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. 旅游景点信息API接口大全

    1.分享数据:“http://www.shareapi.cn/docs/api/id/127”,免费,次数1000次 返回JSON示例 { "SceneryID":10224,/* ...

  2. NBU恢复数据库数据文件报错RMAN-06091

    RMAN-06091: no channel allocated for maintenance (of an appropriate type) 一.错误信息 报错信息如下 Starting res ...

  3. 神经网络中Batch Size的理解

    直观的理解:Batch Size定义:一次训练所选取的样本数.Batch Size的大小影响模型的优化程度和速度.同时其直接影响到GPU内存的使用情况,假如你GPU内存不大,该数值最好设置小一点. 为 ...

  4. 【java异常】Unexpected error occurred in scheduled task. java.lang.StackOverflowError: null

    可能是栈溢出(StackOverFlow) 背景:我用定时器new东西 原因:频率太快了好像!

  5. Nacos

    欢迎来到 Nacos 的世界! Nacos 致力于帮助您发现.配置和管理微服务.Nacos 提供了一组简单易用的特性集,帮助您快速实现动态服务发现.服务配置.服务元数据及流量管理. Nacos 帮助您 ...

  6. [RN] 全国城市列表选择 (包含定位城市、热门城市、全国城市)

    全国城市列表选择 (包含定位城市.热门城市.全国城市) 用ScrollView 实现,解决 SectionList 实现的卡顿问题 实现效果如图: 代码实现如图: 主逻辑文件 cityList.js ...

  7. django -- 安装django

    安装 通过cmd进行安装 pip3 install django==1.11.11 创建django项目 通过命令行进行创建 下面的命令创建了一个名为"mydjango"的Djan ...

  8. NOIp初赛题目整理

    NOIp初赛题目整理 这个 blog 用来整理扶苏准备第一轮 csp 时所做的与 csp 没 有 关 系 的历年 noip-J/S 初赛题目,记录了一些我从不知道的细碎知识点,还有一些憨憨题目,不定期 ...

  9. Spring Boot 知识笔记（全局异常）

    通过ControllerAdvice和ExceptionHandler捕获异常和错误信息,向前端返回json格式的状态码及异常描述信息. 1.新建一个Controller,抛出一个异常. packag ...

  10. ES6-Generator基础用法

    Generator简介: 生成器,本身是函数,执行后返回迭代对象,函数内部要配合yield使用Generator函数会分段执行,遇到yield暂停. 使用Generator注意点:function 和 ...