1 2 3 4 5 6 7 8 9 10 11 12 13 | import { connect } from 'react-redux'; import Books from '../components/books'; const mapStateToProps = state => ({ books: state.books, currentStatus: state.currentStatus, displayMode: state.displayMode, }); export default connect( mapStateToProps, null )(Books); |
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 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | import React from 'react'; import Book from './book.js'; let ReactCSSTransitionGroup = require('react-addons-css-transition-group'); const Books = ({ books, displayMode, currentStatus, }) => { const styles = { container: { width: '100%', }, spinner: { textAlign: 'center', width: '100%', }, }; const Spinner = () => ( <div style={styles.spinner}> <img src="./images/spinner.gif" role="presentation" /> </div> ); const bookMarkup = () => { let components = null; let bookItems = (<span>No items!</span>); if (books.length > 0) { components = books.map(item => { if (item.volumeInfo.imageLinks) { // Need different keys for different display modes // to trigger <ReactCSSTransitionGroup> animations const key = displayMode === 'THUMBNAIL' ? item.id + 1 : item.id; bookItems = ( <Book item={item} displayMode={displayMode} key={key} />); } return bookItems; }); } return components; } return ( <div> { currentStatus !== 'Fetching...' ? null : <Spinner /> } <div style={styles.container}> <ReactCSSTransitionGroup transitionName="books" transitionLeaveTimeout={1} transitionEnterTimeout={1000}> {bookMarkup()} </ReactCSSTransitionGroup> </div> </div> ); }; Books.propTypes = { books: React.PropTypes.array.isRequired, currentStatus: React.PropTypes.string.isRequired, displayMode: React.PropTypes.string.isRequired, }; export default Books; |
欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/) | Powered by Discuz! 7.0.0 |