[英]How could I display sections in chunks of certain length in JavaScript/react
Currently I map through an array and for each item, I show a circle目前我 map 通过一个数组和每个项目,我显示一个圆圈
<div className='circlesCont'>
{launches.map((launch, index) => (
<div
className={`${'circle'} ${
index === slideNumber ? 'selectedPage' : ''
}`}
key={index}
id={index}
onClick={handleCirclePageClick}
></div>
))}
</div>
I am trying to make it so only chunks of 8 items are being shown at a time.我正在努力做到这一点,因此一次只显示 8 个项目的块。
For example, items 0 to 7 , then 7-13 etc.例如,项目0 到 7 ,然后是7-13等。
Can this be done with logic inside the map container?这可以通过 map 容器内的逻辑来完成吗?
Currently, I could just hide the items whose index is more than 8 and show the first 7, but can't come up with a way to get the required behavior.目前,我可以隐藏索引超过 8 的项目并显示前 7 个,但无法想出获得所需行为的方法。
Thanks in advance提前致谢
You can use .splice
to create dynamic chunks as required by you.您可以根据需要使用
.splice
创建动态块。 Each of your launches
array entry will contain a isVisible
property based on which you choose to render it or not .您的每个
launches
数组条目都将包含一个isVisible
属性,您可以根据该属性选择是否渲染它。 I have created a sandbox for it.我为它创建了一个沙箱。 Here's the code for reference with comments:-
以下是带有注释的代码供参考:-
import React, { useState } from "react";
import "./styles.css";
const defaultState = [
{ name: "Hey1", isVisibile: true },
{ name: "Hey2", isVisibile: true },
{ name: "Hey3", isVisibile: true },
{ name: "Hey4", isVisibile: true },
{ name: "Hey5", isVisibile: true },
{ name: "Hey6", isVisibile: true },
{ name: "Hey7", isVisibile: true },
{ name: "Hey8", isVisibile: true },
{ name: "Hey9", isVisibile: true },
{ name: "Hey10", isVisibile: true },
{ name: "Hey11", isVisibile: true },
{ name: "Hey12", isVisibile: true },
{ name: "Hey13", isVisibile: true },
{ name: "Hey14", isVisibile: true },
{ name: "Hey15", isVisibile: true },
{ name: "Hey16", isVisibile: true },
{ name: "Hey17", isVisibile: true },
{ name: "Hey18", isVisibile: true },
{ name: "Hey19", isVisibile: true }
];
export default function App() {
const [state, setState] = useState(defaultState);
const handleChunk = (start, end) => {
// Get the chunk elements by using splice on copy of state;
const chunkElements = [...state].splice(start, end - start);
// For chunk elements, set the isVisible to false.
chunkElements.forEach((ele) => (ele.isVisibile = false));
// Make again a new copy of our state.
const newState = [...state];
// In our new state, update the visibility of the chunk elements.
newState.splice(start, end - start, ...chunkElements);
setState(newState);
};
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<ul>{state.map((ele) => ele.isVisibile && <li>{ele.name}</li>)}</ul>
<button onClick={() => handleChunk(3, 7)}>Chunk 3-7 it!!</button>
<button onClick={() => handleChunk(8, 12)}>Chunk 8-12 it!!</button>
</div>
);
}
The above is a very raw implementation.上面是一个非常原始的实现。 It's really upto to you how you want to handle the visibility of state items but the chunking can be achieved as stated in the function.
如何处理 state 项目的可见性完全取决于您,但可以按照 function 中的说明实现分块。
You can use slice function to limit your map您可以使用切片 function 来限制您的 map
<div className='circlesCont'>
{launches.slice(0,7).map((launch, index) => (
<div
className={`${'circle'} ${
index === slideNumber ? 'selectedPage' : ''
}`}
key={index}
id={index}
onClick={handleCirclePageClick}
></div>
))}
</div>
You could store the page number in a state (and the number of items to display for each page in a const)您可以将页码存储在 state 中(以及在 const 中为每个页面显示的项目数)
const [launchesPageIndex, setLaunchesPageIndex] = useState(0);
const itemsByPage = 7;
Then in order to implement the pagination you should replace然后为了实现分页,你应该替换
{launches.map((launch, index) => (
by经过
{launches.slice(launchesPageIndex * itemsByPage, launchesPageIndex * itemsByPage + itemsByPage).map((launch, index) => (
and when you want to go to the next page you only have to increment launchesPageIndex当你想 go 到下一页时,你只需要增加 launchPageIndex
setLaunchesPageIndex(launchesPageIndex + 1);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.