在 React 中创建一个带有可滚动行和可点击元素的 table

Question

与参与者有这个活动对象：

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中有id为1、2和5的人参加。

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

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

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

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

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

你对如何在 React 中做这样的事情有什么想法吗？

Answer 1

我建议使用像 react-virtualized (or for your purpose I would use the new version react-window 这样的库。它有非常好的文档和大量适用于各种项目的示例。

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

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

如果您不想做那样的事情，我建议您使用 semantic-ui 提供的选项。看看这个例子（scrollable table) and also try to use this组件提高性能。

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

祝你好运<3

在 React 中创建一个带有可滚动行和可点击元素的 table

Create a table with scrollable rows and clickable elements in React

javascript

reactjs

semantic-ui

material-ui