如何使用反应虚拟化在表格上实现无限滚动？

问题描述

我一直在用 react-virtualised 文档苦苦挣扎他们有全功能的示例表。 我想要的只是让我的表格无限滚动。请如果有人可以提供帮助。 我只想在我的内容在屏幕上可见时呈现它。
注意：我不会从任何 API 中提取数据，我将静态数据（一组对象）保存到本地文件夹中。
请在下面查看我的应用程序的屏幕截图。

下面是我的代码。

const renderRows = items.map((data,index) => {
    return (
      <tr
        className="table__row"
        key={data.id}
        onClick={() => onRowClick(data.id)}
      >
        <td style={{ marginRight: '2px' }}>
          <img
            onClick={(e) => {
              toggleStarSelect(e,data.id);
            }}
            src={Star}
            className="star"
            alt="star"
            style={{ padding: '2px' }}
          />

          {data['#']}
        </td>
        <td>
          <ImageLoadHandler
            isloaded={isloaded}
            handleImage={handleImage}
            data={data}
          />

          <span style={{ padding: '10px' }}>{data.Name}</span>
          <span
            style={{
              backgroundColor: 'lightgray',opacity: '0.5',fontSize: '13px',}}
          >
            {data.Symbol}
          </span>
        </td>
        <td>{data.Price}</td>
        <td>{data['1h']}</td>
        <td className={data['24h'] > 0 ? 'green' : 'red'}>
          {data['24h'] > 0 ? (
            <img className="arrowicon" src={SortUpGreen} alt="sort-up-green" />
          ) : (
            <img className="arrowicon" src={SortDownRed} alt="sort-down-red" />
          )}
          {data['24h']}%
        </td>
        <td>{data['7d']}</td>
        <td>{data['Mkt Cap']}</td>
        <td>{data['24h Vol']}</td>
        <td style={{ padding: '0',paddingRight: '8px' }}>
          <Suspense fallback={<div className="loading">loading...</div>}>
            <Graph data={data} idx={index} />
          </Suspense>
        </td>
      </tr>
    );
  });

  return (
    <div className="app">
      <header>
        <Header />
      </header>
      <table className="app__table">
        <thead className="app__tablehead">
          <tr>
            <th
              onClick={() => requestSort('#')}
              className={getClassNamesFor('#')} //returns ascending or descending
            >
              #
            </th>
            <th
              onClick={() => requestSort('Name')}
              className={getClassNamesFor('Name')}
            >
              Coin
            </th>
            <th
              onClick={() => requestSort('Price')}
              className={getClassNamesFor('Price')}
            >
              Price
            </th>
            <th
              onClick={() => requestSort('1h')}
              className={getClassNamesFor('1h')}
            >
              1h
            </th>
            <th
              onClick={() => requestSort('24h')}
              className={getClassNamesFor('24h')}
            >
              24h
            </th>
            <th
              onClick={() => requestSort('7d')}
              className={getClassNamesFor('7d')}
            >
              7d
            </th>
            <th
              onClick={() => requestSort('Mkt Cap')}
              className={getClassNamesFor('Mkt Cap')}
            >
              Mkt Cap
            </th>
            <th
              onClick={() => requestSort('24h Vol')}
              className={getClassNamesFor('24h Vol')}
            >
              24h Vol
            </th>
            <th className="nohover">Last 7 days</th>
          </tr>
        </thead>
        <tbody>{renderRows}</tbody>
      </table>
    </div>
  );

解决方法

在表格元素上无限滚动的工作示例。也是一个工作 repl。

import React,{useState,useEffect} from 'react';
import './App.css';

function App() {
  let items = [];
  for (let i = 0; i < 100; i++) {
    items.push({
      key: 'foo' + i,value: 'bar' + i,});
  }

  let dataTable = React.createRef();
  
  const [list,setList] = useState({
    itemsDisplayed: 20,data: items.slice(0,20),});

  let onScroll = () => {
    let tableEl = dataTable.current;
    if (tableEl.scrollTop === (tableEl.scrollHeight - tableEl.offsetHeight)) {
      if (list.itemsDisplayed + 10 <= items.length) {
        setList({
          itemsDisplayed: list.itemsDisplayed + 10,list.itemsDisplayed + 10),});
      }
    }
  };

  return (
    <div className="App">
      <table id="data-table" ref={dataTable} onScroll={onScroll}>
        <tbody>
          {list.data.map((item) => {
            return (
              <tr key={item.key}>
                {item.value}
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

export default App;

还要提一下，this question解决了滚动触发的问题。重点是使用 React 内置的 onScroll 事件。