1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | import React, { Component } from 'react'; import { StoplightContainer } from './stoplight-container'; import { ButtonContainer } from './button-container'; import { createStore } from 'redux'; import { reducer } from './reducer'; export class App extends Component { render() { const store = createStore(reducer); return( <div> <StoplightContainer store={store}/> <ButtonContainer store={store}/> </div> ) } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | import { connect } from 'react-redux'; import { Stoplight } from './stoplight'; const mapStateToProps = state => { return { goColor: state == 'GO' ? 'rgb(39,232,51)' : 'white', cautionColor: state == 'CAUTION' ? 'yellow' : 'white', stopColor: state == 'STOP' ? 'red' : 'white' } } const mapDispatchToProps = null; export const StoplightContainer = connect( mapStateToProps, mapDispatchToProps )(Stoplight); |
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 | import React, { Component } from 'react'; export const Stoplight = ({ goColor, cautionColor, stopColor }) => { return( <div style={{textAlign: 'center'}}> <svg height='170'> <circle cx='145' cy='60' r='15' fill={stopColor} stroke='black'/> <circle cx='145' cy='100' r='15' fill={cautionColor} stroke='black'/> <circle cx='145' cy='140' r='15' fill={goColor} 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 | import { connect } from 'react-redux'; import { Buttons } from './buttons'; import { goAction, cautionAction, stopAction } from './actions'; const mapStateToProps = state => { return { lightStatus: state } } const mapDispatchToProps = dispatch => { return { go: () => { dispatch(goAction) }, caution: () => { dispatch(cautionAction) }, stop: () => { dispatch(stopAction) } } } export const ButtonContainer = connect( mapStateToProps, mapDispatchToProps )(Buttons); |
欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/) | Powered by Discuz! 7.0.0 |