我想使用react在我的SPA中实现分页组件， reactstrap .. etc我总共有10张卡（即10张带标题的电影卡 和类别）
我根据我的要求实现了大多数代码，我需要做 一页中有4张电影卡的传呼系统。 你可以在图像中看到我的输出 引用
this is the output of my existing code
我已经尝试使用以下代码进行分页（请帮助我更改此代码） 我想映射到我的卡片以在一页上显示4。
import React from 'react';
import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
import PropTypes from 'prop-types';
import MovieList from './MovieList';
class Pages extends React.PureComponent {
constructor() {
super();
this.dataSet = [...Array(Math.ceil(4))].map(
(a, i) => "dom" + (i + 1)
);
this.pageSize = 4;
this.pagesCount = Math.ceil(this.dataSet.length / this.pageSize);
this.state = {
currentPage: 0
};
}
handleClick(e, index) {
e.preventDefault();
this.setState({
currentPage: index
});
}
render() {
const { currentPage } = this.state;
return (
<React.Fragment>
<div className="pagination-wrapper">
<Pagination aria-label="Page navigation example">
<PaginationItem disabled={currentPage <= 0}>
<PaginationLink
onClick={e => this.handleClick(e, currentPage - 1)}
previous
href="#"
/>
</PaginationItem>
{[...Array(this.pagesCount)].map((page, i) =>
<PaginationItem active={i === currentPage} key={i}>
<PaginationLink onClick={e => this.handleClick(e, i)} href="#">
{i + 1}
</PaginationLink>
</PaginationItem>
)}
<PaginationItem disabled={currentPage >= this.pagesCount - 1}>
<PaginationLink
onClick={e => this.handleClick(e, currentPage + 1)}
next
href="#"
/>
</PaginationItem>
</Pagination>
</div>
{this.dataSet
.slice(
currentPage * this.pageSize,
(currentPage + 1) * this.pageSize
)
.map((data, i) =>
<div className="data-slice" key={i}>
{data}
</div>
)}
</React.Fragment>
);
}
}
export default Pages;
以下代码用于电影列表
import React from 'react';
import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
import PropTypes from 'prop-types';
import MovieList from './MovieList';
class Pages extends React.PureComponent {
constructor() {
super();
this.dataSet = [...Array(Math.ceil(4))].map(
(a, i) => "dom" + (i + 1)
);
this.pageSize = 4;
this.pagesCount = Math.ceil(this.dataSet.length / this.pageSize);
this.state = {
currentPage: 0
};
}
handleClick(e, index) {
e.preventDefault();
this.setState({
currentPage: index
});
}
render() {
const { currentPage } = this.state;
return (
<React.Fragment>
<div className="pagination-wrapper">
<Pagination aria-label="Page navigation example">
<PaginationItem disabled={currentPage <= 0}>
<PaginationLink
onClick={e => this.handleClick(e, currentPage - 1)}
previous
href="#"
/>
</PaginationItem>
{[...Array(this.pagesCount)].map((page, i) =>
<PaginationItem active={i === currentPage} key={i}>
<PaginationLink onClick={e => this.handleClick(e, i)} href="#">
{i + 1}
</PaginationLink>
</PaginationItem>
)}
<PaginationItem disabled={currentPage >= this.pagesCount - 1}>
<PaginationLink
onClick={e => this.handleClick(e, currentPage + 1)}
next
href="#"
/>
</PaginationItem>
</Pagination>
</div>
{this.dataSet
.slice(
currentPage * this.pageSize,
(currentPage + 1) * this.pageSize
)
.map((data, i) =>
<div className="data-slice" key={i}>
{data}
</div>
)}
</React.Fragment>
);
}
}
export default Pages;
以下代码是主要数据代码
import React, { Component } from 'react';
import { Container, Row, Col } from 'reactstrap';
import MovieList from './MovieList';
class Main extends Component {
constructor(props) {
super(props);
this.state = {
movies: [
{
id: '1',
title: 'Oceans 8',
category: 'Comedy',
likes: 4,
dislikes: 1
}, {
id: '2',
title: 'Midnight Sun',
category: 'Comedy',
likes: 2,
dislikes: 0
}, {
id: '3',
title: 'Les indestructibles 2',
category: 'Animation',
likes: 3,
dislikes: 1
}, {
id: '4',
title: 'Sans un bruit',
category: 'Thriller',
likes: 6,
dislikes: 6
}, {
id: '5',
title: 'Creed II',
category: 'Drame',
likes: 16,
dislikes: 2
}, {
id: '6',
title: 'Pulp Fiction',
category: 'Thriller',
likes: 11,
dislikes: 3
}, {
id: '7',
title: 'Pulp Fiction',
category: 'Thriller',
likes: 12333,
dislikes: 32
}, {
id: '8',
title: 'Seven',
category: 'Thriller',
likes: 2,
dislikes: 1
}, {
id: '9',
title: 'Inception',
category: 'Thriller',
likes: 2,
dislikes: 1
}, {
id: '10',
title: 'Gone Girl',
category: 'Thriller',
likes: 22,
dislikes: 12
}
]
}
}
likeMe = (id) => {
var index = this.state.movies.findIndex(movie => movie.id === id);
if (index === -1) {
// handle error
} else {
this.setState({
movies: [
...this.state.movies.slice(0, index),
Object.assign({}, this.state.movies[index], { likes: this.state.movies[index].likes + 1 }),
...this.state.movies.slice(index + 1)
]
});
}
}
dislikeMe = (id) => {
var index = this.state.movies.findIndex(movie => movie.id === id);
if (index === -1) {
// handle error
} else {
this.setState({
movies: [
...this.state.movies.slice(0, index),
Object.assign({}, this.state.movies[index], { dislikes: this.state.movies[index].dislikes + 1 }),
...this.state.movies.slice(index + 1)
]
});
}
}
removeMovie(id) {
this.setState({ movies: this.state.movies.filter(movie => movie.id !== id) });
}
render() {
let MovieLists = this.state.movies.map(movie => {
return (
<div>
<Col >
<MovieList key={movie.id} removeMovie={this.removeMovie.bind(this)} movie={movie} likeMe={this.likeMe.bind(this)} dislikeMe={this.dislikeMe.bind(this)} />
</Col>
</div>
)
})
return (
<Container fluid>
<Row>
{MovieLists}
</Row>
</Container>
)
}
}
export default Main;
请尝试帮助我更改Pages类中的代码。