Question

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

我正在尝试模仿与here on 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子标题并反映{{1} }。

但是，它正在尝试导航到页面/overview#createqueryschema。我不确定为什么/应该在仅附加＃和/createqueryschema属性的情况下尝试导航到新页面。

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

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

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

在为同一页面导航设置锚点元素时，我仍然遇到一些麻烦。我的应用由于其他原因已经在使用哈希路由器，因此我的基本页面<Header> 彼此的页面看起来像这样/home/#/ /home/#/page1

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

page2

然后使用<List.Item> <a href="#some-random-header">Random Header</a> </List.Item>属性创建命名锚 id

当我单击链接时，它将尝试导航到URL为<Header id="some-random-header">Random Header Section</Header>的{{1}} INSTEAD的新页面

Answer 1

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

因此您可以尝试以下操作：

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> 
      </>
)

}

使用react组件内的<a>标签进行锚导航

1 个答案: