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

Question

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

假设一家公司有 90 名员工。在本例中，分页组件将使用数字 9 作为属性(每个页面渲染 10 个工作人员，从而生成 9 个页面，每个页面 10 个工作人员)。

如何创建一个循环，该循环采用 prop 并根据 prop 带来的内容循环 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