<div className="listCheckbox">
{objects.map((e) => {
return (
<div key={e.value}>
<FormControlLabel control={<Checkbox />} label={e.label} />
</div>
);
})}
</div>
//css----------------------------------------------------------------------------------
.listCheckbox {
max-height: 350px;
overflow-y: scroll;
}
這里的物件是陣列型別的狀態，包含超過 250 條記錄。如何使用相同的樣式更有效地渲染它
uj5u.com熱心網友回復：
您可以使用分頁并限制記錄而不是全部顯示。當您嘗試渲染更多內容時，您可以將其添加到 中previous state，這樣您就不會丟失您的previous fetched records內容，并且會更加優化。
uj5u.com熱心網友回復：
以下是一些加載大型資料串列的方法：
注意：為方便起見，我在括號中提到了一些 npm 庫，但這些功能也可以自行實作。
- 分頁（https://www.npmjs.com/package/react-paginate）
- 無限滾動（https://www.npmjs.com/package/react-infinite-scroll-component）
另請查看此博客以獲取更多選項和解釋。
uj5u.com熱心網友回復：
如果您對分頁不感興趣，則應使用虛擬串列。
您可以使用react-virtualized，或嘗試從頭開始構建
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/443843.html
標籤：javascript 反应 jsx