Javascript 物料界面（Scrollspy）-反应-使用选项卡在列表中移动并自动滚动到索引

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

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.];

..在物料界面中，它们被用作类别的选项卡标题：

  <AppBar>
    <Tabs
      value={tabIndex}
      onChange={handleChange}
      indicatorColor="secondary"
      variant="scrollable"
      scrollButtons="auto"
    >
      {categories.map((i) => (
        <Tab
          key={i}
          label={i}
        />
      ))}
    </Tabs>
  </AppBar>

然后，我在tabs标题下有一个长长的项目列表，这些项目按类别排序

如何使用选项卡按顺序在列表中移动，方法是根据所选选项卡自动滚动到位置中的第一个类别，以及在滚动列表中特定的第一个索引时自动更新选项卡位置

有关可视示例：

如何在material ui和react中实现类似的功能？总之

滚动浏览具有类别并按类别排序的大型项目列表 从选项卡选择自动滚动到第一个列表位置类别 根据列表滚动位置自动选择选项卡

---

您正在寻找的组件是，并且是材质ui

目前，他们已经在名为的物料ui文档中实现了组件。若你们在右边的文档中看到了内容部分

在这里，我找到了两个解决方案

使用 试试这个

---

正确的答案在上面，但也有一个同样有效的答案。

非常感谢。我在找这个名字的时候都快发疯了。真棒的回答，谢谢！