红绿灯切换效果
1.JS代码（父类）
import React from 'react';import ClassNames from 'classnames';import RedLight from "./redLight";import YellowLight from "./yellowLight";import GreenLight from "./greenLight";import AllLight from "./allLight";import AllNotLight from "./allNotLight";import './style/light.scss';export default class Light extends React.Component{ constructor(props){ super(props); this.state = { isRed: 0, isYellow: 0, isGreen: 0 }; this._textRed = "红灯亮"; this._textYellow = "黄灯亮"; this._textGreen = "绿灯亮"; this._textAll = "全都亮"; } onChangeState(isTrue){ if(isTrue.isRed === 1){ this._textRed = "红灯灭" }else{ this._textRed = "红灯亮" } if(isTrue.isYellow === 1){ this._textYellow = "黄灯灭" }else{ this._textYellow = "黄灯亮" } if(isTrue.isGreen === 1){ this._textGreen = "绿灯灭" }else{ this._textGreen = "绿灯亮" } if(isTrue.isRed === 1 && isTrue.isYellow === 1 && isTrue.isGreen === 1){ this._textAll = "都不亮" }else if(isTrue.isRed === 0 && isTrue.isYellow === 0 && isTrue.isGreen === 0){ this._textAll = "全都亮" } this.setState(isTrue); //console.log(isTrue) } redClass() { let style = {}; style["div_light_grey"] = true; if (this.state.isRed !== 0){ style["div_light_red"] = true; } return style; } yellowClass() { let style = {}; style["div_light_grey"] = true; if (this.state.isYellow !== 0){ style["div_light_yellow"] = true; } return style; } greenClass() { let style = {}; style["div_light_grey"] = true; if (this.state.isGreen !== 0){ style["div_light_green"] = true; } return style; } getDom(){ return { this.onChangeState(object)} } text={ this._textRed} textAll={ this._textAll} /> { this.onChangeState(object)} } text={ this._textYellow} textAll={ this._textAll} /> { this.onChangeState(object)} } text={ this._textGreen} textAll={ this._textAll} /> { this.onChangeState(object)} } text={ this._textAll} /> } render(){ console.log("渲染：render"); return this.getDom(); }}
2.JS代码（子类）
---红灯demo，其他灯写法一样，省略了
import React from 'react';import './style/light.scss';export default class RedLight extends React.Component{ constructor(props){ super(props); this.state = { text:this.props.text, textAll: this.props._textAll }; this.click = ()=>{ if(this.state.text === "红灯亮"){ this.setState({text: "红灯灭"}); this.props.onClicked( { isRed: 1, isYellow: 0, isGreen: 0 } ); }else if(this.state.text === "红灯灭"){ this.setState({text: "红灯亮"}); if(this.state.textAll === "都不亮"){ this.props.onClicked( { isRed: 0, isYellow: 1, isGreen: 1 } ); }else{ this.props.onClicked( { isRed: 0 } ); } } }; } redLight(){ return []; } render() { return this.redLight(); } componentWillReceiveProps(nextProps){ this.setState( { text: nextProps.text, textAll: nextProps.textAll } ) }}
3.SCSS代码
.div{ width: 17rem; height: 19rem; margin: 5rem auto; .div_light{ border: 1px solid #000; width: 7rem; height: 19rem; float: left; .div_light_grey{ @extend .div_light; height: 5rem; width: 5rem; margin: 1rem 0 0 1rem; background: grey; border-radius: 50px; } .div_light_red{ @extend .div_light; height: 5rem; width: 5rem; margin: 1rem 0 0 1rem; background: red; border-radius: 50px; } .div_light_yellow{ @extend .div_light; height: 5rem; width: 5rem; margin: 1rem 0 0 1rem; background: yellow; border-radius: 50px; } .div_light_green{ @extend .div_light; height: 5rem; width: 5rem; margin: 1rem 0 0 1rem; background: green; border-radius: 50px; } } .div_button{ border: 1px solid #000; width: 5rem; height: 19rem; float: left; margin-left: 5rem; .redLight{ margin: 2.2rem 1rem 2rem 1rem; cursor: pointer; } .yellowLight{ margin: 1rem 1rem 2rem 1rem; cursor: pointer; } .greenLight{ margin: 1rem 1rem 2rem 1rem; cursor: pointer; } .allLight{ margin: 1rem 1rem 2rem 1rem; cursor: pointer; } /*.allNotLight{ margin: 1rem; cursor: pointer; }*/ }}
4.效果图
