1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | import React, { Component } from 'react'; const stopColor = (state) => { return state == 'STOP' ? 'red' : 'white'; } const cautionColor = (state) => { return state == 'CAUTION' ? 'yellow' : 'white'; } const goColor = (state) => { return state == 'GO' ? 'rgb(39,232,51)' : 'white'; } export const Stoplight = ({ store }) => { const state = store.getState(); return( <div style={{textAlign: 'center'}}> <svg height='170'> <circle cx='145' cy='60' r='15' fill={stopColor(state)} stroke='black'/> <circle cx='145' cy='100' r='15' fill={cautionColor(state)} stroke='black'/> <circle cx='145' cy='140' r='15' fill={goColor(state)} stroke='black'/> </svg> </div> ) } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | import React, { Component } from 'react'; import { goAction, cautionAction, stopAction } from './actions'; export const Buttons = ({ store }) => { const state = store.getState(); return( <div style={{textAlign: 'center'}}> <button onClick={() => {store.dispatch(goAction)}} disabled={state == 'GO' || state == 'CAUTION'} style={{cursor: 'pointer'}}> Go </button> <button onClick={() => {store.dispatch(cautionAction)}} disabled={state == 'CAUTION' || state == 'STOP'} style={{cursor: 'pointer'}}> Caution </button> <button onClick={() => {store.dispatch(stopAction)}} disabled={state == 'STOP' || state == 'GO'} style={{cursor: 'pointer'}}> Stop </button> </div> ) } |
1 2 3 4 5 6 7 8 9 10 11 | 'use strict'; import React from 'react'; import ReactDOM from 'react-dom'; import Redux, { createStore } from 'redux'; import { reducer } from './reducer'; import { App } from './app'; ReactDOM.render(<App store={createStore(reducer)}/>, document.getElementById('root')) |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | 'use strict'; import React, { Component } from 'react'; const stopColor = (store) => { return store.getState() == 'STOP' ? 'red' : 'white'; } const cautionColor = (store) => { return store.getState() == 'CAUTION' ? 'yellow' : 'white'; } const goColor = (store) => { return store.getState() == 'GO' ? 'rgb(39,232,51)' : 'white'; } export class Stoplight extends Component { componentWillMount() { this.props.store.subscribe(() => { this.forceUpdate(); }); } render() { return( <div style={{textAlign: 'center'}}> <svg height='170'> <circle cx='145' cy='60' r='15' fill={stopColor(this.props.store)} stroke='black'/> <circle cx='145' cy='100' r='15' fill={cautionColor(this.props.store)} stroke='black'/> <circle cx='145' cy='140' r='15' fill={goColor(this.props.store)} stroke='black'/> </svg> </div> ) } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | 'use strict'; import React, { Component } from 'react'; import { goAction, cautionAction, stopAction } from './actions'; export class Buttons extends Component { componentWillMount() { this.props.store.subscribe(() => { this.forceUpdate(); }); } render() { const state = this.props.store.getState(); return( <div style={{textAlign: 'center'}}> <button onClick={() => {this.props.store.dispatch(goAction)}} disabled={state == 'GO' || state == 'CAUTION'} style={{cursor: 'pointer'}}> Go </button> <button onClick={() => {this.props.store.dispatch(cautionAction)}} disabled={state == 'CAUTION' || state == 'STOP'} style={{cursor: 'pointer'}}> Caution </button> <button onClick={() => {this.props.store.dispatch(stopAction)}} disabled={state == 'STOP' || state == 'GO'} style={{cursor: 'pointer'}}> Stop </button> </div> ) } } |
欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/) | Powered by Discuz! 7.0.0 |