【问题标题】:How to implement react-particles-js with anchor links?如何使用锚链接实现 react-particles-js?
【发布时间】:2021-03-31 22:04:50
【问题描述】:

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

 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 个链接无法显示问题

【问题讨论】:

    标签: javascript reactjs particles.js


    【解决方案1】:

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

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

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

    【讨论】:

    • 我有,那个配置:(
    • 我确实对您的实现进行了改造,并且它有效!!!好像是渲染的地方,谢谢大佬!!!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-10-22
    • 2015-05-07
    • 1970-01-01
    • 2020-09-22
    相关资源
    最近更新 更多