<title>Document</title>
<!-- 输入bs3-cdn:css -->
<!-- Latest compiled and minified CSS -->
<link
rel="stylesheet"
href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"
/>
</head>
<body>
<div id="app" class="container"></div>
<script src="./libs/babel.min.js"></script>
<script src="./libs/react.js"></script>
<script src="./libs/react-dom.js"></script>
<script type="text/babel">
const { Component } = React;
class Book extends Component {
render() {
const { book } = this.props;
// bs3-card-background 输入这个 ,就能找到对应的bootstrap组件
return (
<div className="card text-white bg-primary">
<img className="card-img-top" src={book.coverImg} alt="" />
<div className="card-body">
<h4 className="card-title">{book.title}</h4>
<p className="card-text">{book.descriptions}</p>
</div>
</div>
);
}
}
class App extends Component {
constructor(props) {
super(props);
this.state = {
list: [],
};
}
componentDidMount() {
this.loadMore();
}
loadMore() {
fetch("http://localhost:3009/api/v1/books")
.then((res) => res.json())
.then((res) => {
this.setState({
list: res.books,
});
});
}
render() {
return (
<div className="row">
{this.state.list.map((book) => (
<div key={book._id} className="col-md-4">
<Book book={book} />
</div>
))}
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("app"));
</script>
</body>
如果想添加点击加载的按钮,可以按找下方代码修改
loadMore() {
fetch("http://localhost:3009/api/v1/products?page=" + this.state.page)
.then((res) => res.json())
.then((res) => {
console.log(res);
this.setState({
list: [...this.state.list, ...res.products],
page: this.state.page + 1,
});
});
}
render() {
const { list } = this.state;
return (
<div className="row">
{list.map((item) => {
return (
<div key={item._id} className="col-md-4">
<Product product={item} />
</div>
);
})}
<button onClick={() => this.loadMore()}>点击加载更多</button>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("app"));