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 | import React from 'react'; const Book = ({ item, displayMode, }) => { const styles = { links: { marginTop: '20px', }, link: { padding: '25px', }, image: { boxShadow: '3px 3px 3px #686868', marginBottom: '15px', }, }; const linkMarkup = (currentItem, link) => ( <div style={styles.links}> <a href={link} style={styles.link}> {currentItem.volumeInfo.title} </a> </div> ); const thumbnailMarkup = (currentItem, link) => ( <a href={link} style={styles.link}> <img src={currentItem.volumeInfo.imageLinks.thumbnail} style={styles.image} role="presentation" /> </a> ); const link = item.volumeInfo.canonicalVolumeLink; return displayMode === 'THUMBNAIL' ? thumbnailMarkup(item, link) : linkMarkup (item, link); }; Book.propTypes = { item: React.PropTypes.object.isRequired, displayMode: React.PropTypes.string.isRequired, }; export default Book; |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <html> <head> <title>Book Search</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles.css"> </head> <body> <app>Loading...</app> </body> <!-- Polyfill(s) for older browsers --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.js"></script> <script src="node_modules/reflect-metadata/Reflect.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="dist/bundle.js"></script> </html> |
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 | import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import App from './components/app.component'; import Book from './components/book.component'; import Books from './components/books.component'; import Controls from './components/controls.component'; import DisplayMode from './components/displayMode.component'; import History from './components/history.component'; import StateViewer from './components/stateviewer.component'; import TopicSelector from './components/topicselector.component'; @NgModule({ bootstrap: [ App ], declarations: [ App, Book, Books, Controls, DisplayMode, History, StateViewer, TopicSelector, ], imports: [ BrowserModule, FormsModule, ], }) export class AppModule { } |
1 2 3 4 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; platformBrowserDynamic().bootstrapModule(AppModule); |
欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/) | Powered by Discuz! 7.0.0 |