如何在渲染方法中制作组件循环？

Question

我有一个分页组件，它从其父级接收作为道具，它必须呈现的页面链接数。

假设一家公司有 90 名员工。在这种情况下，Pagination 组件将使用数字 9 作为道具（每个页面呈现 10 个工作人员，产生 9 个页面，每个页面有 10 个工作人员）。

如何创建一个循环来获取道具并根据道具带来的内容循环 DIV 和链接？

如果我创建一个 FOR 循环，它会在我的页面中打印“[object]”而不是 HTML。

import React, { Component } from 'react'

class Paginacao extends Component {
    render() {

    // This console.log() returns 9
    console.log(this.props.totalPages);

        return (
            <div>
                // A 9-cycles loop must print this:
                // <div><a href = "page1">1</a></div>
                // <div><a href = "page2">2</a></div>
                // <div><a href = "page3">3</a></div>
                // <div><a href = "page4">4</a></div>
                // <div><a href = "page5">5</a></div>
                // <div><a href = "page6">6</a></div>
                // <div><a href = "page7">7</a></div>
                // <div><a href = "page8">8</a></div>
                // <div><a href = "page9">9</a></div>
            </div>
        )
    }
}

export default Paginacao

Answer 1

你可以像这样使用 for 循环。

import React, { Component } from 'react'

class Paginacao extends Component {
    render() {
      const items = [];

      for (let i = 0; i < this.props.totalPages; i++) {
        items.push(<div><a href =`page${i + 1}`>{i + 1}</a></div>)
      }
     // This console.log() returns 9
    console.log(this.props.totalPages);

        return (
            <div>
               {items}
            </div>
        )
    }
}

export default Paginacao

Answer 2

您需要从this.props.totalPages 编号创建数组。最简单的方法是

const pages = [];

for (let i = 1; i <= this.props.totalPages; i++) {
  pages.push(<div><a href={`page{i}`}>{i}</a></div>);
}

然后在渲染方法中

return (
  <div>
    {pages}
  </div>
)

或更花哨的风格：

return (
  <div>
    {Array.from(Array(this.props.totalPages).keys()).map(i =>
      <div><a href={`page{i + 1}`}>{i + 1}</a></div>
    )}
  </div>
)

如果你使用 Ramda 或类似的 lib，你可以将 Array.from(Array(this.props.totalPages).keys()) 替换为 R.times

Answer 3

映射一个传递对象数组并将该数组映射到您要渲染的组件。

如下代码：

<div>
  {
    [1, 2, 3, 4, 5, 6, 7, 8, 9].map(item => {
      return <div><a href={'page' + item + 1}>{item}</a></div>;
    })
  }
</div>