使用 React 组件内的 <a> 标签锚定导航

IT技术 html reactjs anchor
2021-04-29 04:54:59

我正在尝试在我的 React 应用程序内的页面组件之一中设置锚导航。

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

作为参考，我正在查看http://www.tagindex.net/html/link/a_name.html

所以我继续尝试使用name属性来实现

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

然后它应该跳转到的子标题 

<Header>
  <a name="createqueryschema">Create Query Schema</a>
  <Header.Subheader style={{ marginTop: "20px", fontSize: "1rem" }}>
    BLAH BLAH BLAH BLAH BLAH BLAH
  </Header.Subheader>
</Header>

我在名为 的页面上呈现此列表和子标题/overview，因此理论上，当我单击列表中的项目时，它应该跳转到Create Query Schema子标题并反映/overview#createqueryschema在 URL 中。

但是，它正在尝试导航到 page /createqueryschema。我不确定为什么/如何在它应该只附加 # 和name属性时尝试导航到新页面。

编辑：它也没有跳转到所需的元素

我有一个codeandbox设置来进一步解释。单击菜单栏顶部的 docs，这将带您到带有锚点导航的页面。如果您单击该Overview部分下的两个锚点中的任何一个，<Header>则不会滚动到相应的位置。

编辑：更新以更好地解释路由问题

我在为同一页面导航设置锚元素时仍然遇到一些问题。由于另一个原因，我的应用程序已经在使用哈希路由器，所以我的基本页面/home/#/ 每个其他页面看起来像这样/home/#/page1 /home/#/page2

例如，我正在使用页面内锚点导航来page2 创建指向下面命名锚点的链接

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

然后使用id属性 创建命名锚点<Header id="some-random-header">Random Header Section</Header>

当我点击链接时，它尝试导航到一个新页面，网址为/home/#/some-random-headerINSTEAD/home/#/page2#some-random-header

1个回答

通常 # 用于标识，但是在 React 中不使用标识。您可以做的是创建一个引用。然后您可以创建一个方法 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> 
      </>
)

}
其它你可能感兴趣的问题
上一篇springboot-react 应用程序在 Internet Explorer 11 和 9 中不起作用 下一篇在数组上映射返回 [object Object]