使用 <a> 的锚导航反应组件内的标签 [英] Anchor navigation using the <a> tag inside a react component

问题描述

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

I'm attempting to set up anchor navigation in one of my page components inside my react app.

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

I'm trying to mimic the same functionality as seen here on draft.js where it uses sub headers as anchors (with the link icon next to it), which is also reflected in the URL.

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

As a reference I'm looking at http://www.tagindex.net/html/link/a_name.html

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

So I went ahead and tried implementing using the name attribute

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

然后它应该跳转到子标题

Then the subheader it should jump to

<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 子标题并在 URL 中反映 /overview#createqueryschema.

I'm rendering this list and subheader on a page called /overview, so in theory when I click on the item in the list it should jump to the Create Query Schema subheader AND reflect /overview#createqueryschema in the URL.

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

However, it is trying to navigate to page /createqueryschema. I'm not sure why/how it's trying to navigate to a new page when it should just be appending the # and the name attribute.

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

It's also not jumping to the desired element

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

.

I have a codesandbox setup to further explain. Click docs on the top of the menu bar, which will take you to the page with the anchor nav. If you click any of the two anchors under the Overview section then corresponding <Header> is not scrolled to.

更新以更好地解释路由问题

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

I’m still having some trouble setting up an anchor element for same page navigation. My app is already using hash router for another reason, so my base page /home/#/ Each other page would look like this /home/#/page1 /home/#/page2

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

For example I’m using the in-page anchor navigation on page2 I’m creating a link to the named anchor below

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

然后使用 id 属性创建命名锚点<Header id="some-random-header">随机头部分</Header>

Then create the named anchor using id attribute <Header id="some-random-header">Random Header Section</Header>

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

When I click on the link, it tries to navigate to a new page with url /home/#/some-random-header INSTEAD of /home/#/page2#some-random-header

推荐答案

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

Normally the # is used for an Id, however id's are not used in React. What you can do is create a ref. Then you can create a method onClick to scroll to the ref when the ref is clicked

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

So you could try something like:

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

}

这篇关于使用 <a> 的锚导航反应组件内的标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！