Material UI - React - 使用选项卡在列表中移动并自动滚动到索引

Question

如果我有一个很大的项目列表，每个项目都有一个类别，

const categories: string[] = [0, 1, 2, 3, 4, 5];

const items: {name: string, category: number}[] = [{name: "foo", category: 1}, {name: "bar", category: 1}, {name: "foobar", category: 2}, {name: "barfoo", category: 3}, ... etc.];

..在 material-ui 中，它们被用作类别的选项卡标题：

  <AppBar>

    <Tabs

      value={tabIndex}

      onChange={handleChange}

      indicatorColor="secondary"

      variant="scrollable"

      scrollButtons="auto"

    >

      {categories.map((i) => (

        <Tab

          key={i}

          label={i}

        />

      ))}

    </Tabs>

  </AppBar>

然后我在选项卡标题下有一长串项目，这些项目按类别分类在一起。

我如何使用选项卡通过自动滚动到基于所选选项卡的位置中的第一个类别以及在滚动到列表中的特定第一个索引时自动更新选项卡位置来按顺序浏览列表。

对于一个视觉示例：

使用制表符在需要按特定顺序阅读的连续内容中移动的示例图像

我怎样才能在材料 ui 和反应中实现这样的东西？总之，

1. 滚动浏览具有类别并按类别排序的大量项目

2. 从选项卡选择自动滚动到第一个列表位置类别

3. 根据列表滚动位置自动选择标签

Answer 1

正确答案在上面，但还有这个 CodeSandbox 示例也可以使用。

Answer 2

您正在寻找的组件是Scrollspy，它是材料 ui 的未来组件。

目前，他们在材料 ui 文档中实现了名为AppTableOfContents 的组件。如果您在右侧的文档中看到内容部分。

https://github.com/mui-org/material-ui/issues/16359 在这里我找到了两个解决方案

1. 使用反应滚动间谍

2. 使用useScrollspy Hook（试试这个）