reactjs - 在反应中跳转到页面中的特定位置

Question

单击按钮时，我需要转到页面上的特定行。如何使用 react-router 来完成。我有：

<Grid xs={3}>    
  <Button>heading</Button>
  <Button>Heading2</Button>
</Grid>
<Grid xs={3}>    
  <h1>heading</h1>
  <p>Paragraph</p>
  <h2>Heading2</h2>
  <p>Paragraph2</p>
</Grid>

单击标题按钮时，它应该跳转到第二个网格中的相关位置。怎么做。我也提到了如何使用 react-router 跳转到页面中的特定位置。

Answer 1

将您的组件包装Link在 MUI 中Button并为您的第二个网格定义一个 id 属性，例如gridWrapper。

<Grid xs={3}>    
  <Button component={Link} to="#gridWrapper">heading</Button>
  <Button>Heading2</Button>
</Grid>
<Grid xs={3} id="gridWrapper">    
  <h1>heading</h1>
  <p>Paragraph</p>
  <h2>Heading2</h2>
  <p>Paragraph2</p>
</Grid>