html 如何让vantajs wave与react应用程序一起工作

06odsfpq 于 2022-11-20 发布在 Vant

关注(0)|答案(1)|浏览(314)

我正在使用vantajs wave库，我的问题是如何让wave在我点击react应用程序的tablinks后继续在CSS选择器上渲染？我得到的第一个错误是在Brave浏览器上，它说：“js：28未捕获的类型错误：无法读取null”“得属性”precision，“并且最初根本不呈现波形.
然而，如果我去谷歌浏览器，看看我选择的元素的背景，有一个波浪效果，我实现了由https：//www.vantajs.com/？effect = waves #提供（backgroundAlpha：1，颜色：2105474，光泽度：30，波高：15，波速：1，缩放：1）
但是，当我从主页选项卡切换到另一个选项卡，然后返回主页（我选择的元素所在的位置）时，波浪效果不再位于所选元素的后面，正如它所说：
“vanta.waves.min.js：161 [VANTA]无法找到元素。
下面是我的HTML：

<meta charset='utf-8' lang="EN-US">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="./src/three.r92.min.js"></script>
    <script src="https://www.vantajs.com/dist/vanta.waves.min.js"></script>
    <link rel="stylesheet" href="./css/style.css">
    <title>DigitalWebFlex</title>
</head>
<body>
        <div id='root'></div>
    <script type='text/javascript' src='/dist/bundle.js' charset='utf-8'></script>
        <script>
            VANTA.WAVES('#showcase__container');
        </script>
</body>

我的React是：

<div className="showcase__container" id="showcase__container">

                <button className="button button--animated button--white" onClick={this.setPagePortfolio}>Portfolio</button>

            </div>

提前感谢！

Html

来源：https://stackoverflow.com/questions/58926195/how-to-make-vantajs-wave-work-with-react-app

1条答案

按热度按时间

lc8prwob1#

嘿你可以用npm i vanta安装vanta
并在头中包含三个. j
然后再

import React from 'react'
import WAVES from 'vanta/dist/vanta.waves.min'

class MyComponent extends React.Component {
  constructor() {
    super()
    this.vantaRef = React.createRef()
  }
  componentDidMount() {
    this.vantaEffect = WAVES({
      el: this.vantaRef.current
    })
  }
  componentWillUnmount() {
    if (this.vantaEffect) this.vantaEffect.destroy()
  }
  render() {
    return (
    <div ref={this.vantaRef}>
      /* Foreground content goes here */
    </div>
    )
  }
}

这应该会有所帮助，您可以参考this page和Vanta.js README以更好地理解

赞(0）回复(0）举报 2022-11-20

我来回答

html 如何让vantajs wave与react应用程序一起工作

1条答案

相关问题

热门标签

最新问答