1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | import React from 'react'; import ReactDOM from 'react-dom'; import Redux, { createStore } from 'redux'; import { reducer } from './reducer'; import { App } from './app'; const store = createStore(reducer); const render = () => ( ReactDOM.render(<App store={store}/>, document.getElementById('example')) ) store.subscribe(render); render(); // initial render |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | import React, { Component } from 'react'; import { Stoplight } from './stoplight'; import { Buttons } from './buttons'; export class App extends Component { render() { return( <div> <Stoplight store={this.props.store} /> <Buttons store={this.props.store} /> </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 | 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> ) } |
欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/) | Powered by Discuz! 7.0.0 |