在 React 中偏移列表显示

Question

我有一个关于在reactJS（使用Next.JS）中显示列表的问题。

这是我显示列表的常用方式，使用这样的代码：

    theList.map((e:MyType) =>
        <div key={e.orderNbr}>
            <DisplayOneListElement .... />
        </div>)

列表从第一个元素开始显示，并且工作正常。但是假设列表有 300 个元素长，我将如何更改代码以便用户看到从第 191 个元素开始的列表？ 同时保留稍后向上或向下滚动的可能性。

191当然是任意的。

Answer 1

您想要高效地渲染列表的子集。如果可行的话，您可能会考虑使用像

react-window

或

react-virtualised

这样的库。

否则，您将不得不编写逻辑来一次显示列表的某个子集。这是您可以用作基础的 -

const renderListFromArbitraryIndex = (index) => {
    return <DisplayOneListElement key={theList[index].orderNbr} data={theList[index]} />
}

const renderListBeforeIndex = (index) => {
    theList.splice(0, index).map((e: MyType) =>
    <div >
        <DisplayOneListElement  key={e.orderNbr} />
    </div>);
}

const renderListAfterIndex = (index) => {
    theList.splice(index, theList.length - 1).map((e: MyType) =>
    <div >
        <DisplayOneListElement key={e.orderNbr} />
    </div>);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js"></script>