将表限制为15行，然后单击"Load more“在React JS中加载更多15行

import React, { Component } from 'react';

class LoadMoreTable extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loadedRows: 15, // 初始加载15行
    };
  }

  handleLoadMore = () => {
    this.setState(prevState => ({
      loadedRows: prevState.loadedRows + 15, // 每次加载增加15行
    }));
  }

  render() {
    const { data } = this.props;
    const { loadedRows } = this.state;
    const displayedData = data.slice(0, loadedRows); // 根据已加载行数截取要显示的数据

    return (
      <div>
        <table>
          <thead>
            <tr>
              <th>表头1</th>
              <th>表头2</th>
              {/* 其他表头列 */}
            </tr>
          </thead>
          <tbody>
            {displayedData.map((row, index) => (
              <tr key={index}>
                <td>{row.column1}</td>
                <td>{row.column2}</td>
                {/* 其他表格列 */}
              </tr>
            ))}
          </tbody>
        </table>
        {loadedRows < data.length && (
          <button onClick={this.handleLoadMore}>加载更多</button>
        )}
      </div>
    );
  }
}

export default LoadMoreTable;