如何在 JavaScript/react 中以一定长度的块显示部分

Question

目前我 map 通过一个数组和每个项目，我显示一个圆圈

    <div className='circlesCont'>
                  {launches.map((launch, index) => (
                    <div
                      className={`${'circle'} ${
                        index === slideNumber ? 'selectedPage' : ''
                      }`}
                      key={index}
                      id={index}
                      onClick={handleCirclePageClick}
                    ></div>
                  ))}
    </div>

我正在努力做到这一点，因此一次只显示 8 个项目的块。

例如，项目0 到 7 ，然后是7-13等。

这可以通过 map 容器内的逻辑来完成吗？

目前，我可以隐藏索引超过 8 的项目并显示前 7 个，但无法想出获得所需行为的方法。

提前致谢

Answer 1

您可以根据需要使用.splice创建动态块。 您的每个launches数组条目都将包含一个isVisible属性，您可以根据该属性选择是否渲染它。 我为它创建了一个沙箱。 以下是带有注释的代码供参考：-

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>
  );
}

上面是一个非常原始的实现。 如何处理 state 项目的可见性完全取决于您，但可以按照 function 中的说明实现分块。

代码沙盒

Answer 2

您可以使用切片 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>

Answer 3

您可以将页码存储在 state 中（以及在 const 中为每个页面显示的项目数）

const [launchesPageIndex, setLaunchesPageIndex] = useState(0);
const itemsByPage = 7;

然后为了实现分页，你应该替换

{launches.map((launch, index) => (

经过

{launches.slice(launchesPageIndex * itemsByPage, launchesPageIndex * itemsByPage + itemsByPage).map((launch, index) => (

当你想 go 到下一页时，你只需要增加 launchPageIndex

setLaunchesPageIndex(launchesPageIndex + 1);