javascript - ReactJS-用'0'覆盖空格

我有这个ReactJS应用

查看应用程序的工作情况

https://codepen.io/claudio-bitar/pen/VERORW

它返回一个分页，每页最多8个数字。

例：
我有十个数字，所以

第一页：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/