react显示文件第一页

以下是使用React显示文件第一页的示例代码：

import React from 'react';
import ReactDOM from 'react-dom';

class FileList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      files: [
        { name: 'file1.txt', size: '10KB' },
        { name: 'file2.txt', size: '15KB' },
        { name: 'file3.txt', size: '5KB' },
        // 其他文件...
      ],
      currentPage: 1,
      filesPerPage: 5,
    };
  }

  render() {
    const { files, currentPage, filesPerPage } = this.state;

    // 计算当前页的文件列表
    const indexOfLastFile = currentPage * filesPerPage;
    const indexOfFirstFile = indexOfLastFile - filesPerPage;
    const currentFiles = files.slice(indexOfFirstFile, indexOfLastFile);

    // 渲染文件列表
    const fileItems = currentFiles.map((file, index) => (
      <li key={index}>
        {file.name} - {file.size}
      </li>
    ));

    return (
      <div>
        <h1>文件列表</h1>
        <ul>{fileItems}</ul>
      </div>
    );
  }
}

ReactDOM.render(<FileList />, document.getElementById('root'));

这段代码定义了一个名为`FileList`的React组件，它包含一个文件列表的状态和当前页数的状态。在`render`方法中，根据当前页数和每页文件数量计算出当前页的文件列表，并将其渲染为一个无序列表。

你可以将上述代码保存为`index.js`文件，并在HTML文件中引入React和ReactDOM库，然后在一个具有id为`root`的元素上渲染`FileList`组件。这样就可以在浏览器中显示文件的第一页了。