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

Question

我一直在与反应虚拟化文档作斗争他们有全功能的例子table。我想要的只是 table 的简单无限滚动。请如果有人可以提供帮助。我只想在屏幕上显示我的内容时呈现它。
注意：我没有从任何 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>
  );

Answer 1

table 元素无限滚动的工作示例。还有一个工作 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,
          data: items.slice(0, 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;

另外提一下，滚动触发一次的问题被解决了。重点是使用 React 内置的 onScroll 事件。

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

How can I implement infinite scrolling on a table using react-virualised?

javascript

reactjs

react-virtualized