javascript - 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>

然后，我在选项卡标题下有一长串项目，这些项目按它们的类别排序。
我如何使用选项卡在列表中按顺序移动，方法是根据所选选项卡自动滚动到位置中的第一个类别，以及在滚动经过列表中的特定第一个索引时自动更新选项卡位置。
对于一个视觉示例:
Example image to use tabs to move through sequential content that needs to be read in a particular order
我怎么能在 Material UI 和 react 中实现这样的目标？总之，

滚动浏览具有类别并按类别排序的大型项目列表

自动滚动从选项卡选择

到第一个列表位置类别

自动选择 基于列表滚动位置的标签

Answer 1

正确答案在上面但也有this CodeSandbox example这也将起作用。