我有这个 ReactJS 应用
查看应用的运行情况
https://codepen.io/claudio-bitar/pen/VERORW
它返回每页最多八个数字的分页。
例子: 我有十个数字,所以
第一页:1、2、3、4、5、6、7、8
第二页:9、10
我想用“0”覆盖空白数字空间,直到达到 8 个数字为止。例如在第二页我想返回:
9, 10, 0, 0, 0, 0, 0, 0
我该如何解决?谢谢
应用代码:
class TodoApp extends React.Component {
constructor() {
super();
this.state = {
todos: {
"elements": ['1','2','3','4','5','6','7','8','9','10']
},
currentPage: 1,
todosPerPage: 8
};
this.handleClick = this.handleClick.bind(this);
}
handleClick(event) {
this.setState({
currentPage: Number(event.target.id)
});
}
render() {
const { todos, currentPage, todosPerPage } = this.state;
// Logic for displaying current todos
const indexOfLastTodo = currentPage * todosPerPage;
const indexOfFirstTodo = indexOfLastTodo - todosPerPage;
const currentTodos = todos.elements.slice(indexOfFirstTodo, indexOfLastTodo);
const renderTodos = currentTodos.map((todo, index) => {
return <li key={index}>{todo}</li>;
});
// Logic for displaying page numbers
const pageNumbers = [];
for (let i = 1; i <= Math.ceil(todos.elements.length / todosPerPage); i++) {
pageNumbers.push(i);
}
const renderPageNumbers = pageNumbers.map(number => {
return (
<li
key={number}
id={number}
onClick={this.handleClick}
>
{number}
</li>
);
});
return (
<div>
<ul>
{renderTodos}
</ul>
<ul id="page-numbers">
{renderPageNumbers}
</ul>
</div>
);
}
}
ReactDOM.render(
<TodoApp />,
document.getElementById('app')
);
最佳答案
您可以创建一个循环,直到 currentTodos
中有 todosPerPage
元素为止,然后只需按 0
直到它出现为止。
class TodoApp extends React.Component {
// ...
render() {
const { todos, currentPage, todosPerPage } = this.state;
// Logic for displaying current todos
const indexOfLastTodo = currentPage * todosPerPage;
const indexOfFirstTodo = indexOfLastTodo - todosPerPage;
const currentTodos = todos.elements.slice(
indexOfFirstTodo,
indexOfLastTodo
);
while (currentTodos.length !== todosPerPage) {
currentTodos.push(0);
}
// ...
}
}
class TodoApp extends React.Component {
constructor() {
super();
this.state = {
todos: {
elements: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]
},
currentPage: 1,
todosPerPage: 8
};
this.handleClick = this.handleClick.bind(this);
}
handleClick(event) {
this.setState({
currentPage: Number(event.target.id)
});
}
render() {
const { todos, currentPage, todosPerPage } = this.state;
// Logic for displaying current todos
const indexOfLastTodo = currentPage * todosPerPage;
const indexOfFirstTodo = indexOfLastTodo - todosPerPage;
const currentTodos = todos.elements.slice(
indexOfFirstTodo,
indexOfLastTodo
);
while (currentTodos.length !== todosPerPage) {
currentTodos.push(0);
}
const renderTodos = currentTodos.map((todo, index) => {
return <li key={index}>{todo}</li>;
});
// Logic for displaying page numbers
const pageNumbers = [];
for (let i = 1; i <= Math.ceil(todos.elements.length / todosPerPage); i++) {
pageNumbers.push(i);
}
const renderPageNumbers = pageNumbers.map(number => {
return (
<li key={number} id={number} onClick={this.handleClick}>
{number}
</li>
);
});
return (
<div>
<ul>{renderTodos}</ul>
<ul id="page-numbers">{renderPageNumbers}</ul>
</div>
);
}
}
ReactDOM.render(<TodoApp />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
关于javascript - ReactJS - 用 '0' 覆盖空格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53093238/