Html 使用<；a>；在react组件中添加标记

我正在尝试在react应用程序中的一个页面组件中设置锚导航

我试图模仿它使用子标题作为锚（旁边有链接图标）的相同功能，这也反映在URL中

作为我的参考

因此，我继续尝试使用

name

属性实现

  <List.Item>
    <a href="#createqueryschema">Create Query Schema</a>
  </List.Item>

然后使用

id

属性创建命名锚

随机标题部分

当我点击链接时，它试图导航到一个带有url

/home/#/some random header

的新页面，而不是

/home/#/page2#some random header

通常#用于Id，但在React中不使用Id。您可以做的是创建一个ref。然后您可以创建一个方法onClick，在单击ref时滚动到ref

因此，您可以尝试以下方法：

import React, { useRef } from "react";

const Component = () => {
   const myRef = useRef();
   const handleClick = () => {
      window.scrollTo(0, myRef.current.offsetTop)
   }
   return ( 
      <>
      <List.Item>
         <p onClick={handleClick}>Create Query Schema</p>
      </List.Item>
      <div name="createqueryschema" ref={myRef} >Create Query Schema</div> 
      </>
)

}

import React，{useRef}来自“React”；
常量组件=（）=>{
const myRef=useRef（）；
常量handleClick=（）=>{
滚动到（0，myRef.current.offsetTop）
}
报税表（
创建查询架构
创建查询模式
)
}

如果在新选项卡中打开，它对我有效。@eramit2010是否使用chrome？我在每个浏览器上都试过。它不会跳到任何元素，我使用的是chrome。你试过使用这个url吗？嗯，这确实有效，奇怪。但在我的实际实现中，URL问题仍然是一个问题。这就像它忘记了

/overview

是页面的基础，而是尝试导航到一个新页面，而实际上它只需要

/overview#查询某个内容

，这样

id

就可以正确地与锚定一起工作，如果锚定位于任何与react相关的组件之外，所以，只要像

这样的普通html标记就可以了？是的，你可以在html中使用。这里的更多信息：也许这对我来说也是一个解决方案@DJ2如果你想导航到另一条你使用Link而不是React中的锚标记的路线，我也会这样做。链接将呈现到DOM中的a元素，但将确保导航位于React中的路由内。否则，您可能会导航到应用程序之外的其他页面。我以前有过这个问题。

   <List.Item>
    <a href="#some-random-header">Random Header</a>
  </List.Item>

import React, { useRef } from "react";

const Component = () => {
   const myRef = useRef();
   const handleClick = () => {
      window.scrollTo(0, myRef.current.offsetTop)
   }
   return ( 
      <>
      <List.Item>
         <p onClick={handleClick}>Create Query Schema</p>
      </List.Item>
      <div name="createqueryschema" ref={myRef} >Create Query Schema</div> 
      </>
)

}