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 | import React from 'react'; import ControlsContainer from './controls'; import BooksContainer from './books'; import StateViewerContainer from './stateviewer'; const titleStyle = { fontFamily: 'tahoma', fontSize: '24px', textAlign: 'center' } const Title = () => ( <div style={titleStyle}> Book Search </div> ); export default () => ( <div> <Title /> <hr/> <ControlsContainer /> <BooksContainer /> <StateViewerContainer /> </div> ) |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | import { connect } from 'react-redux'; import StateViewer from '../components/stateviewer'; import stateHistory from '../statehistory'; const mapStateToProps = state => { return { books: state.books, topic: state.topic, currentStatus: state.currentStatus, displayMode: state.displayMode, history: stateHistory } } export default connect( mapStateToProps, null )(StateViewer); |
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 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | import React from 'react'; const StateViewer = ({ topic, books, currentStatus, displayMode, history }) => { const styles = { container: { margin: '20px', width: '400px', fontFamily: 'tahoma' }, title: { fontSize: '24px', marginTop: '25px' }, state: { marginTop: '10px' }, hr: { marginTop: '50px' } }; return( <div style={styles.container}> <hr style={styles.hr}/> <div style={styles.title}> Application State </div> <div style={styles.state}> Topic: {topic}<br/> Display mode: { displayMode }<br/> Current status: { currentStatus }<br/> Books displayed: { books.length }<br/> Actions processed: { history.past.length + history.future.length + 1 }<br/> Current action: { history.past.length + 1 } </div> </div> ); } StateViewer.propTypes = { books: React.PropTypes.array.isRequired, currentStatus: React.PropTypes.string.isRequired, displayMode: React.PropTypes.string.isRequired, history: React.PropTypes.object.isRequired, topic: React.PropTypes.string.isRequired, }; export default StateViewer; |
欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/) | Powered by Discuz! 7.0.0 |