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

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

假设一家公司有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

最佳答案

您可以像这样使用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