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

Question

使用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>
  );
};

在这个组件中发生了什么 link 像这样

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

不工作。

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

这里 its 一个实时版本，其中 1 link 无法显示问题

Answer 1

您需要将 interactivity.detectsOn 设置为 window（InteractivityDetect.window 或 "window"）

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

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

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

How to implement react-particles-js with anchor links?

javascript

reactjs

particles.js