动态展示数组片段：React 实现点击按钮切换显示数组中的连续元素-js教程-PHP中文网

动态展示数组片段：React 实现点击按钮切换显示数组中的连续元素

心靈之曲

发布： 2025-07-17 16:02:14

原创

443人浏览过

动态展示数组片段：react 实现点击按钮切换显示数组中的连续元素

本文将介绍如何使用 React 实现一个动态展示数组片段的功能。给定一个数组，初始状态下显示数组的前三个元素，通过点击按钮，可以向后或向前移动窗口，每次显示连续的三个元素。文章将详细讲解如何使用 React 的 useState hook 来管理起始索引，并正确地使用 slice 方法来提取数组片段，最终实现动态展示效果。

React 实现动态数组片段展示

在 React 中，直接使用变量来管理状态是不推荐的，因为组件重新渲染时，变量会被重置。因此，我们需要使用 useState hook 来管理数组片段的起始索引。

1. 初始化状态

首先，我们需要引入 useState hook，并初始化起始索引 start 为 0。

import React, { useState } from "react";

const App = () => {
  const list = [21, 42, 54, 1, 87, 90, 56, 27, 89];
  const [start, setStart] = useState(0);

  // ...
};

登录后复制

2. 更新状态的函数

接下来，我们创建一个函数 handleClick，用于点击按钮时更新 start 的值。

const handleClick = () => {
  setStart(start + 1);
};

登录后复制

3. 使用 slice 方法提取数组片段

使用 slice 方法提取数组片段时，需要注意其参数：起始索引和结束索引。结束索引是不包含在提取的片段中的。因此，我们需要将结束索引设置为 start + n，其中 n 是要显示的元素个数。

Veed Video Background Remover

Veed推出的视频背景移除工具

查看详情

const n = 3;
const items = list.slice(start, start + n).map((i) => {
  return (
    <button style={{ margin: 10 }} type="button" className="btn btn-primary">
      {i}
    </button>
  );
});

登录后复制

4. 渲染组件

最后，我们将 items 渲染到组件中，并将 handleClick 函数绑定到按钮的 onClick 事件上。

return (
  <div>
    <div onClick={handleClick}>Click</div>
    <div>{items}</div>
  </div>
);

登录后复制

完整代码示例

import React, { useState } from "react";

const App = () => {
  const list = [21, 42, 54, 1, 87, 90, 56, 27, 89];
  const [start, setStart] = useState(0);

  const handleClick = () => {
    setStart(start + 1);
  };

  const n = 3;

  const items = list.slice(start, start + n).map((i) => {
    return (
      <button style={{ margin: 10 }} type="button" className="btn btn-primary">
        {i}
      </button>
    );
  });

  return (
    <div>
      <div onClick={handleClick}>Click</div>
      <div>{items}</div>
    </div>
  );
};

export default App;

登录后复制

注意事项