Question

对于以下列表：

<ul className="pagination">
  <li className="pagination1" onClick={() => this.handleClick(1)}>1</li>
  <li className="pagination2" onClick={() => this.handleClick(2)}>2</li>
  <li className="pagination3" onClick={() => this.handleClick(3)}>3</li>
  <li className="pagination4" onClick={() => this.handleClick(4)}>4</li>
  <li className="pagination5" onClick={() => this.handleClick(5)}>5</li>
  <li className="pagination6" onClick={() => this.handleClick(6)}>6</li>
</ul>

我想创建一个循环，该循环将根据数据中对象的数量（Data.length）生成分页项。

谢谢！

Answer 1

您可以在data数组上使用数组方法map，并使用索引来获取className，handleClick参数和{{1} }文本。

示例

li

class App extends React.Component {
  state = {
    data: [1, 2, 3, 4, 5, 6]
  };

  handleClick = (i) => {
    console.log(i);
  }

  render() {
    const { data } = this.state;

    return (
      <ul className="pagination">
        {data.map((element, index) => {
          const i = index + 1;
          return (
            <li
              key={i}
              className={`pagination${i}`}
              onClick={() => this.handleClick(i)}
            >
              {i}
            </li>
          );
        })}
      </ul>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

Answer 2

var end=6;
for (i=1;i<=end; i++)
{
    document.getElementById("pagination").innerHTML += "<li className='pagination"+i+"' onClick={() => this.handleClick("+i+")}>"+i+"</li>";
}

制作一个javscript循环列表

2 个答案: