概述

一个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. ASP.NET Core 2.2 和之前版本区别: 可以在IIS上进行ASP.NET核心进程托管 (翻译)

    原文链接: https://weblog.west-wind.com/posts/2019/Mar/16/ASPNET-Core-Hosting-on-IIS-with-ASPNET-Core-22 ...

  2. Oracle自定义脱敏函数

    对于信息安全有要求的,在数据下发和同步过程中需要对含有用户身份信息的敏感字段脱敏,包括用户姓名.证件号.地址等等,下面是自定义函数的代码 CREATE OR REPLACE FUNCTION F_GE ...

  3. MySQL Execution Plan--合理利用隐式的业务逻辑

    问题描述 优化过程中遇到一个SQL: SELECT SUM(user_value) FROM user_log ; 其执行计划为: . row *************************** ...

  4. 201671030126 赵佳平 实验十四 团队项目评审&课程学习总结

    项目 内容 这个作业属于那个课程 2016级计算机科学与工程学院软件工程(西北师范大学) 这个作业的要求在哪里 实验十四 团队项目评审&课程学习总结 作业学习目标 掌握软件项目评审会流程:反思 ...

  5. turtle模块

    turtle(海龟)绘图用法 import turtle -->调出turtle库 setup()-->设置窗体大小和位置 turtle.setup(width,height,startx ...

  6. 排序算法-快速排序（Java）

    package com.rao.sort; import java.util.Arrays; /** * @author Srao * @className QuickSort * @date 201 ...

  7. 第02组Beta冲刺（2/4）

    队名:十一个憨批 组长博客 作业博客 组长黄智 过去两天完成的任务:了解整个游戏的流程 GitHub签入记录 接下来的计划:继续完成游戏 还剩下哪些任务:完成游戏 燃尽图 遇到的困难:没有美术比较好的 ...

  8. 基于web公交查询系统----数据库设计

    要求:公交查询系统,管理员可以新增线路,修改车辆参数,发车时间表,删除车次,站名等. 用户可以按线路查询,按站点查询相关信息,也可查询两站点之间的换乘信息等. 数据库应包含管理员表,车站表,线路表,车 ...

  9. vue+Element 表格编辑

    先上效果 <template> <div> <el-table :data="tableData" style="width: 100%&q ...

  10. Ubuntu 16.04安装ANSYS 2019 R1

    参考:<ANSYS15.0 for Linux下载及安装教程> 参考链接: https://wenku.baidu.com/view/92bdf21b312b3169a451a4b5.ht ...