Material UI (Scrollspy) - 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>

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

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

举一个直观的例子：

使用选项卡在需要按特定顺序阅读的连续内容之间移动的示例图像

我怎样才能在材料用户界面和反应中实现这样的事情？总之，

1. 滚动浏览按类别排序的大量项目列表
2. 从选项卡选择自动滚动到第一个列表位置类别
3. 根据列表滚动位置自动选择选项卡

Answer 1

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