时间戳

首页 > 解决方案 > 在 React 中创建一个包含可滚动行和可点击元素的表格

javascript - 在 React 中创建一个包含可滚动行和可点击元素的表格

问题描述

与他们的参与者有这个事件的对象：

const myData = {
  "event_1": ["1", "2","3"],
  "event_2": ["11", "5","8", "9"],
  "event_3": ["1", "2","5"],
  "event_4": ["1", "2"],
  "event_5": ["6", "7","8"],
  "event_8": ["1", "6","9"]
}

每个数字代表一个参与者。

例如，其中event_3有 ids1和.25

我想创建一个这样的用户界面：

在此处输入图像描述

对于每个事件，应该存在一行，并且在该行内作为每个参与者的元素（如正方形）。方块应该是可点击的，就像重定向到localhost:3000/participant_id.

如果行上的元素多于屏幕可以共享的元素，则应该能够水平滚动。

此外，如果行数超过一定数量，则能够垂直滚动。

我知道这不是这个网站上常见的问题，我想知道是否可以这样做（可能使用 Material UI 或 Semantic UI），因为我进行了一些研究，但没有找到可以帮助我的东西。

你对如何在 React 中制作这样的东西有任何想法吗？

标签： javascriptreactjsmaterial-uisemantic-ui

解决方案

我建议使用react-virtualized 之类的库（或者出于您的目的，我将使用新版本react-window）。它有一个非常好的文档和大量适用于各种项目的示例。

我建议的主要原因之一是，如果滚动容器中有很多元素，react-virtualized 将通过仅渲染用户可见的元素来优化性能，从而减小 dom 树的大小。

您可能面临的一个缺点是，如果元素的 dom 树非常大并且包含图像，它可能无法以 60fps 运行，因为库将尝试在渲染之前及时测量元素。（这样做是为了等待图像加载，然后调用一个函数来测量元素，然后再渲染它）。

如果您不想这样做，那么我建议您使用语义用户界面为您提供的选项。看看这个例子（可滚动表格）并尝试使用这个组件来提高性能。

*注意，如果您愿意采用第一种方法，那么在尝试您自己的项目之前，您将不得不对他们的文档进行更多阅读。

祝你好运<3

推荐阅读