reactjs - Material UI 中的交互式目录

Question

我希望我能够在我的应用程序中从 material ui 网站重新创建这个小菜单:

现在我有一个带有列表和链接的组件:

import { Link, List, ListItem } from '@material-ui/core';

const burgerRecipe = [
  {
    id: 0,
    name: "bread",
    quantity: 2
  },
  {
    id: 1,
    name: "steak",
    quantity: 1
  },
  {
    id: 2,
    name: "cheddar",
    quantity: 1
  },
  {
    id: 3,
    name: "pickles",
    quantity: 2
  }
]
/**
 * MenuInteractiveColumn : 
 * @description 
 */
const MenuInteractiveColumn = props => {
  return (
    <>
      <List>
        {burgerRecipe.map(value => {
          return (
            <ListItem key={value.id}>
              <Link href={`/reservations#${value.name}`}
                underline="none"
                onClick={() => {
                  console.info("bip bop");
                }}
              >
                {value.name}
              </Link>
            </ListItem>
          )
        })}
      </List>
      <List>
        {burgerRecipe.map(value => {
          return (
            <div id={value.name}>
              {value.name} -------------


              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in lectus sit amet est mollis pharetra nec non augue. Phasellus eleifend ac erat non aliquam. Donec varius vel orci vel tempus. Suspendisse non dolor est. Duis at consequat diam. Etiam at bibendum orci, at tincidunt nulla. Integer vel quam non urna malesuada auctor. Quisque feugiat ligula dolor, vitae consequat magna mattis nec. Nulla massa nisl, fringilla et felis nec, lobortis placerat lectus. Praesent eget vehicula nulla. Cras lobortis metus sed pellentesque maximus. Proin nisi diam, euismod sit amet lacinia in, fringilla eget dolor. Nunc molestie magna id varius facilisis. Pellentesque sit amet posuere justo. Nullam faucibus lectus at mauris efficitur, sit amet hendrerit massa auctor.

              Fusce a dapibus nibh, at dignissim nulla. Donec tempus ut justo eu volutpat. Pellentesque eget diam ipsum. Nullam vehicula lorem et rhoncus mattis. Duis arcu libero, consectetur a sodales eget, malesuada at purus. Integer a mattis eros. Etiam sagittis, lectus cursus commodo molestie, ante justo maximus diam, pellentesque hendrerit nibh est sed ex. Cras pharetra interdum sagittis. Nulla tincidunt scelerisque purus, eget varius ipsum venenatis porta. Etiam fermentum, diam vitae tempor tempus, quam diam iaculis eros, id fringilla sapien felis ut metus. Quisque et mi condimentum, semper justo ultrices, euismod metus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras posuere et nisl ac ultrices. Donec eu dolor tincidunt, maximus augue quis, suscipit metus. Praesent convallis ut metus vel eleifend.

              Sed eu dignissim urna. Quisque sit amet risus sollicitudin, lobortis purus nec, consequat justo. Vestibulum non mauris faucibus, maximus nulla eu, convallis augue. Aenean vel libero nec felis ullamcorper auctor. Mauris efficitur sed tellus eget semper. Etiam blandit et lectus ut lacinia. Suspendisse faucibus enim convallis, placerat eros vitae, ullamcorper mauris. Quisque quis quam vestibulum, mollis justo ac, pellentesque nisl. Nunc iaculis tortor sit amet ex tristique convallis sit amet sit amet augue. Nulla aliquam sit amet enim eget placerat. Ut quis ex tincidunt, dignissim ligula non, euismod mauris. Sed euismod faucibus massa, vel aliquam elit euismod in.

              Aliquam id sapien nibh. Sed eu tellus eros. Cras interdum magna quis arcu dignissim, eget posuere felis dictum. Donec dictum euismod lectus, nec ornare erat suscipit at. Fusce mi nibh, ullamcorper porttitor orci sit amet, placerat ultrices eros. Nam rutrum mauris sit amet magna iaculis aliquet. Sed venenatis urna in metus volutpat, id sagittis nulla tempor. Curabitur odio metus, porttitor sit amet urna ac, posuere rhoncus neque. Morbi tortor libero, dapibus vitae finibus rutrum, placerat quis leo. Vivamus nunc leo, vehicula vulputate cursus ac, placerat vitae ex. Nullam eu nisl purus. Curabitur vitae egestas turpis, quis volutpat felis. Quisque sit amet purus facilisis, posuere ante in, laoreet nisl. Pellentesque ornare dolor nec lectus porttitor, et venenatis orci auctor. Vestibulum ultrices id enim vel interdum. Ut non tortor placerat, consectetur sem at, viverra elit.

              Etiam non tellus in nisl facilisis pharetra. Vivamus porttitor justo at fringilla euismod. Nunc neque lacus, scelerisque sed pellentesque quis, ullamcorper nec leo. Nullam sed dolor metus. Vivamus aliquet at erat eu blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mollis neque at eros feugiat, nec lacinia lorem finibus. In semper vel lacus eu porttitor. Curabitur mollis lectus ac purus pretium, non facilisis odio viverra. Aliquam erat volutpat. Pellentesque ultrices nulla et nisi placerat, non tempus nisl elementum. Sed dui dui, vestibulum posuere enim vitae, sollicitudin rhoncus metus.
            </div>
          )
        })}
      </List>
    </>
  )
};

export default MenuInteractiveColumn;

我希望它像在 material ui website 上那样转到我页面中的某个 div

编辑:现在有点用了，但它隐藏了我的导航栏下的 lorem Ipsum 的顶部

Answer 1

虽然我没有时间根据您的代码制作示例，但这里有一些您可能感兴趣的资源:

• material-ui - AppTableOfContents
• react-scrollspy - 参见 example关于如何将其与标签一起使用
• react-scroll-agent
• Antd anchor

另见 material-ui: issue 16359了解更多信息