微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

如何使用锚链接实现 react-particles-js?

如何解决如何使用锚链接实现 react-particles-js?

使用react-particles-js 作为React项目的背景,我发现禁用了锚标签,不知道是不是我的实现

 const App = () => {
  return (
    <div className="App" style={{ position: "relative",overflow: "hidden" }}>
      <div style={{ position: "absolute" }}>
        <Particles height="330vh" width="100vw" params={particlesConfig} />
      </div>
      <Home /> {/*this is the content */}
    </div>
  );
};

在这个带有这样链接的组件中会发生什么

        <a
          href="https://tienda-de-garage.herokuapp.com/"
          style={{ textdecoration: "none",color: "black" }}
        >
          <p>Tienda de Garage</p>
        </a>

不工作。

我想知道它的实现,也许是使用视口增加了区域的大小以包含背景,但我不确定。

此处 its 是实时版本,其中 1 链接无法显示问题

解决方法

您需要将 interactivity.detectsOn 设置为 windowInteractivityDetect.window"window"

您可以看到一个工作示例 here

此示例使用 react-tsparticles 但它与 react-particles-js 相同,因为它们共享相同的核心库 tsparticles

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。