脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React无限滚动表格

基于React实现无限滚动表格

 更新时间：2023年11月10日 08:36:14   作者：寄给江南  
以文本为例,为了实现无限循环的视觉效果,我们需要准备两段相同的文本,并让第二段文本的头部衔接在第一段文本的尾部,同时,为两段文本设置相同的滚动动画,本文给大家介绍了基于React实现无限滚动表格,需要的朋友可以参考下

无限滚动效果

以文本为例，为了实现无限循环的视觉效果，我们需要准备两段相同的文本，并让第二段文本的头部衔接在第一段文本的尾部。同时，为两段文本设置相同的滚动动画。

当第一段文本滚动到尾部时，如果能让第一段文本的位置瞬间移动回头部，并将第一段文本的头部内容替换为第二段的头部内容，同时动画也回到开始位置，这样，用户从视觉效果上看是感受不到变化的。

以下代码是 Marquee 组件及其样式的简单实现。

// Marquee.tsx
export default function Marquee(props) {
  const { children } = props;
  return (
    <div className={styles.marquee}>
      <div className={styles.ctx}>{children}</div>
      <div className={styles.ctx}>{children}</div>
    </div>
  );
}

// App.tsx
export default function App() {
  return (
    <Marquee>只期待 後來的你 能快樂 那就是 後來的我 最想的</Marquee>
  );
}

// Marquee.module.scss
.marquee {
  width: 40px;
  overflow: hidden;
  position: relative;

  .ctx {
    animation: scroll 4s infinite linear; // 指定滚动动画
  }
}

@keyframes scroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}

悬停效果

实现鼠标悬停效果，通常有两种方法：

  • 声明 isHovered 变量，通过 onMouseEnter 和 onMouseLeave 事件改变 isHovered 的值，从而实现悬停效果。
  • 使用 :hover 伪类，通过设置 animation-play-state 属性控制动画的运行，从而实现悬停效果。

本文使用第二种方法，为整个外层容器设置 :hover 样式。当鼠标悬浮在整个容器上时，让内部元素的动画暂停。我们在 Marquee.module.scss 文件中添加如下样式：

// ...
.marquee:hover {
  .ctx {
    animation-play-state: paused;
  }
}

到此，最基本的功能已经实现，接下来开始实现表格组件的无限滚动。

表格的无限滚动

首先，实现根据配置动态生成表格的功能。我们从传入的对象数组中提取所有的键，作为表头内容。

本文实现的表头提取函数考虑了传入可选参数的情况，因此它会遍历所有列表项并提取所有存在的键。如果表头属性是固定数量的话，可以使用更简便的方法来提取键。

提取出表头后，我们就可以遍历对象数组中的每一项，并根据对应的键将属性值填入相应的单元格中，逐步构建起表格内容。

基于上述步骤分析，表格组件的初步实现如下（样式在文章末尾给出）：

// DataTable.tsx
export default function DataTable<T extends object>({ dataSource }: { dataSource: Array<T> }) {
  if (!Array.isArray(dataSource) || dataSource.length === 0) {
    return null; // 数据源不是数组或数组为空，停止操作
  }

  const labelList = dataSource.reduce((acc: any, cur: any) => {
    const keys = Object.keys(cur);
    for (const key of keys) {
      if (!acc.includes(key)) {
        acc.push(key);
      }
    }
    return acc;
  }, []); // 提取表头

  return (
    <table>
      <thead>
        <tr>
          {labelList.map((key, index) => (
            <th key={index}>{key}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {dataSource.map((data, rowIndex) => (
          <tr key={rowIndex}>
            {labelList.map((key, columnIndex) => (
              <!-- 如果是可选属性，赋予默认值 -->
              <td key={columnIndex}>{data[key] ?? '-'}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

此时，在 App.tsx 中直接引用 DataTable 组件并传入 data 数组，就可以看到表格动态生成如下。

// App.tsx
import DataTable from '@/components/DataTable';

export default function App() {
  const data = [
    { name: 'Alice', city: 'New York' },
    { name: 'Bob', age: 30, city: 'San Francisco' },
    { name: 'Charlie', age: 35, city: 'Chicago' },
    { name: 'David', age: 40, city: 'Los Angeles', num: 0 },
  ];

  return (
    <DataTable dataSource={data} />
  );
}

接下来，就是加上无限滚动的效果。

通常来说，可滚动表格只会有一个表头，也就是只有一个 thead 部分，并且此处我们把它固定在顶部。再按照上述文字滚动的实现思路，我们只要在一个 table 中准备两份相同的 tbody 内容，然后给这两份 tbody 设置相同的动画即可。

同时，为了限制整体容器的高度，以防用户在表格位置滚动时感知到突变，造成不好的视觉体验，还需要给 table 加一层外部容器。

到此，整个分析过程就结束了，DataTable 组件的最终实现如下：

// DataTable.tsx
export default function DataTable<T extends object>({ dataSource }: { dataSource: Array<T> }) {
  if (!Array.isArray(dataSource) || dataSource.length === 0) {
    return null; // 数据源不是数组或数组为空，停止操作
  }

  const labelList = dataSource.reduce((acc: any, cur: any) => {
    const keys = Object.keys(cur);
    for (const key of keys) {
      if (!acc.includes(key)) {
        acc.push(key);
      }
    }
    return acc;
  }, []); // 提取表头

  return (
    <div className={styles.container}>
      <table className={styles.table}>
        <thead>
          <tr>
            {labelList.map((key, index) => (
              <th key={index}>{key}</th>
            ))}
          </tr>
        </thead>
        <tbody className={styles.tbody}>
          {dataSource.map((data, rowIndex) => (
            <tr key={rowIndex}>
              {labelList.map((key, columnIndex) => (
                <td key={columnIndex}>{data[key] ?? '-'}</td>
              ))}
            </tr>
          ))}
        </tbody>
        <tbody className={styles.tbody}>
          {dataSource.map((data, rowIndex) => (
            <tr key={rowIndex}>
              {labelList.map((key, columnIndex) => (
                <td key={columnIndex}>{data[key] ?? '-'}</td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

// DataTable.module.scss
@keyframes scroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}

.container {
  height: 160px;
  overflow: hidden;

  .table {
    height: 100%;
    overflow: hidden;
    position: relative;
    background-color: #e6e6e6;
  
    .tbody {
      animation: scroll 4s infinite linear;
    }
  }
}

table {
  width: max-content;
  border-spacing: 0;

  thead {
    height: 30px;
    z-index: 99;
    background-color: #adbcaa;
    position: sticky;
    top: 0;

    tr {
      color: #fff;
      font-weight: bold;
    }
  }

  th,
  td {
    width: max-content;
    padding: 0 8px;
    line-height: 30px;
    text-align: center;
  }
}

然后，刷新页面，再看一下页面效果，这样就实现了。

最后

以上就是基于React实现无限滚动表格的详细内容，更多关于React无限滚动表格的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • react实现拖拽模态框

    react实现拖拽模态框

    这篇文章主要为大家详细介绍了react实现拖拽模态框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-08-08
  • 详解React中合并单元格的正确写法

    详解React中合并单元格的正确写法

    用表格进行页面布局,页面布局在各种浏览器的的兼容性, 本文主要介绍了详解React中合并单元格的正确写法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • 详解如何使用Jest测试React组件

    详解如何使用Jest测试React组件

    在本文中,我们将了解如何使用Jest（Facebook 维护的一个测试框架）来测试我们的React组件,我们将首先了解如何在纯 JavaScript 函数上使用 Jest,然后再了解它提供的一些开箱即用的功能,这些功能专门用于使测试 React 应用程序变得更容易,需要的朋友可以参考下
    2023-10-10
  • 一文详解ReactNative状态管理redux-toolkit使用

    一文详解ReactNative状态管理redux-toolkit使用

    这篇文章主要为大家介绍了ReactNative状态管理redux-toolkit使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-03-03
  • React将组件作为参数进行传递的3种方法实例

    React将组件作为参数进行传递的3种方法实例

    其实react组件之间传递参数是比较简单的,组件传入参数的一种方式,下面这篇文章主要给大家介绍了关于React将组件作为参数进行传递的3种方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • React实现Vue的watch监听属性方式

    React实现Vue的watch监听属性方式

    这篇文章主要介绍了React实现Vue的watch监听属性方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • Remix 后台桌面开发electron-remix-antd-admin

    Remix 后台桌面开发electron-remix-antd-admin

    这篇文章主要为大家介绍了Remix 后台桌面开发electron-remix-antd-admin的过程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-04-04
  • React memo减少重复渲染详解

    React memo减少重复渲染详解

    React.memo为高阶组件。它与React.PureComponent 非常相似，但它适用于函数组件，但不适用于class组件。文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-10-10
  • react+antd select下拉框实现模糊搜索匹配的示例代码

    react+antd select下拉框实现模糊搜索匹配的示例代码

    我们在开发过程中，经常会出现下拉框数据很多得情况，本文主要介绍了react+antd select下拉框实现模糊搜索匹配的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-01-01
  • React如何动态控制伪元素样式

    React如何动态控制伪元素样式

    这篇文章主要介绍了React如何动态控制伪元素样式问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11

最新评论