概述

一个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. ta和夏天一起来了

    目录 ta和夏天一起来了 上半年,过去的就让去过去,遗憾的也别再遗憾. 下半年,拥有的请好好珍惜,想要的请努力去追. ta和夏天一起来了 ​ 转眼结束了2019的上半年,在这个月末, 季度末, 周末, ...

  2. 推荐收藏 —— MySQL视图详细介绍

    前言:  在MySQL中,视图可能是我们最常用的数据库对象之一了.那么你知道视图和表的区别吗?你知道创建及使用视图要注意哪些点吗?可能很多人对视图只是一知半解,想详细了解视图的同学看过来哟,本篇文章会 ...

  3. mysql 命令修复表

    如果在断电.硬重启服务器等情况下,可能会造成有些表损坏,这时就需要修复 修复表前需要将mysql停止 centos7 用 systemctl stop mysqld.service 来停止 然后进入到 ...

  4. Nginx Rewrite相关功能-防盗链

    Nginx Rewrite相关功能-防盗链 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任.

  5. iview admin动态路由实现

    参考 https://blog.csdn.net/weixin_41538490/article/details/93749942

  6. 使用cookiecutter创建django项目

    使用cookiecutter创建django项目 下载安装: pip install cookiecutter cookiecutter https://github.com/pydanny/cook ...

  7. 性能测试：TPS和QPS的区别

    做测试,各种ps,jps,tps,qps,rps,hps,你理解几个? 技术群里,问得最多的就是tps和qps,有相似的地方,也有差异的地方,我简单谈下自己的理解.(由于比较忙,下面部分摘抄自网络) ...

  8. 重新学习Spring注解——AOP

    面向切面编程——思想:在一个地方定义通用功能,但是可以通过声明的方式定义这个功能要以何种方式在何处运用,而无须修改受影响的类. 切面:横切关注点可以被模块化为特殊的类. 优点: 1.每个关注点都集中在 ...

  9. Speech Enhancement via Deep Spectrum Image Translation Network

    文中提出了一种深度网络来解决单通道语音增强问题. 链接:https://arxiv.org/abs/1911.01902 简介 因为背景噪声和混响的存在,录音通常会被扭曲,会对后端的语音识别等技术产生 ...

  10. three.js 添加三维坐标系

    //显示三维坐标系 ); scene.add(axis);