Question

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

假设一家公司有90名工人。在这种情况下，分页组件将以数字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或类似的库，则可以将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>

如何在render方法中使组件循环？

3 个答案: