React应用程序锚<a>外部链接不能用于移动端的其他点击

顺晟科技

2021-07-30 11:01:58

我遇到了一个奇怪的问题，外部链接的<a>锚点在我的React应用程序中的移动视图中不能像预期的那样运行。单击外部链接最初在mobile上工作正常，启动一个新选项卡，但随后单击相同的链接或其他<a>元素将不会发生任何事情。

这很奇怪，因为在桌面和较大的视图上可以正常工作。

以下是如何在组件中使用锚点的一个片段示例:

import React from "react";
import Col from "react-bootstrap/Col";
import Row from "react-bootstrap/Row";

function ProjectExample() {
  return (
    <div>
      <Row className="project-row">
        <Col>
          <h3>Foo Bar</h3>
            <p>
              See my project here: <a href="https://github.com" target="_new">GitHub</a>. 
           </p>
        </Col>
      </Row>
    </div>
  );
}

export default ProjectExample;

似乎很基本，对吗？有没有人知道为什么外部链接行为会导致连续点击移动而不发射？从这个意义上来说，这个项目是基本的，对于内部导航，我只使用react-scroll来滚动页面，类似于页面锚。我没有使用react-router-dom或任何其他形式的导航。这些链接纯粹指向外部站点，没有任何与之相关联的单击事件等。

我是否忽略了一些基本的东西？

摘要

外部链接在我的应用程序中作为标准html<a>锚点元素使用。这些指向外部站点，并且在桌面/笔记本电脑较大的视图上工作良好，但是对于移动设备，只有初始链接点击才会打开一个新的标签--连续的和额外的链接点击（甚至相同的链接）不会触发（例如，什么也没有发生）。我做错了什么？

顺晟科技：

使用“_blank”

根据HTML5规范:

有效的浏览上下文名称是任何至少有一个字符不是以u+005f低行字符开头的字符串。（以下划线开头的名称保留给特殊关键字。）

有效的浏览上下文名称或关键字是任何字符串，这些字符串要么是有效的浏览上下文名称，要么是与_blank、_self、_parent或_top之一的ASCII不区分大小写的匹配项。“-source

这意味着HTML5中没有_new这样的关键字，HTML4中也没有。这意味着，如果将此值用作目标属性的值，将不会有任何一致的行为。

有关详细答案，请查看以下内容:target=“_blank”vs.target=“_new”

上一篇：为什么我的标头将其子标垂直居中？下一篇：el-select选中后下拉列表自动

网站建设

Html

React应用程序锚<a>外部链接不能用于移动端的其他点击