Javascript 如何在React.js项目中使用rainyday.js？

有人在react.js项目中使用过吗？我已经找到了一个关于这个的方法，但是自从有人问起，这个库已经可以在npm上使用了。我试着把它作为一个常规模块使用，但它对我不起作用。然后我按照问题中的说明做了：我将源代码复制到我的项目中，并尝试导入和使用它，但尽管事实上一切似乎都很好（没有错误，在inspector中所有内容都可见），但它仍然不起作用。我怎样才能解决这个问题

import React from 'react'
import styled from 'styled-components'
import background from '../../resources/backgroundalt.jpg'
import { RainyDay } from './RainyDay'

const Background = styled.div`
  height: 100vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(${background});
  overflow: hidden;
  transform-origin: bottom;
`
class HomeScreen extends React.Component {
  ref = React.createRef()

  componentDidMount() {
    const image = this.ref.current
    image.onload = function() {
      var engine = new RainyDay({
        image: { background },
        blur: 30
      })

      engine.rain(
        [
          [3, 3, 0.88],
          [5, 5, 0.9],
          [6, 2, 1]
        ],
        100
      )
    }
  }

  render() {
    return <Background ref={this.ref}></Background>
  }
}

从“React”导入React
从“样式化组件”导入样式化
从“../../resources/backgroundalt.jpg”导入背景
从“/RainyDay”导入{RainyDay}
const Background=styled.div`
高度：100vh；
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
背景图像：url（${background}）；
溢出：隐藏；
变换原点：底部；
`
类主屏幕扩展了React.Component{
ref=React.createRef（）
componentDidMount（）{
const image=this.ref.current
image.onload=函数（）{
var引擎=新雨天({
图像：{background}，
模糊：30
})
引擎雨(
[
[3, 3, 0.88],
[5, 5, 0.9],
[6, 2, 1]
],
100
)
}
}
render（）{
返回
}
}

您的案例在两个方面有所不同：

您正在将

div

与

背景图像一起使用

您正在尝试

engine.rain（）

调用

RainyDay

有几件事：

image.onload=function（）{

不相关，因为

image

是一个

div

，而不是

img

，所以

onload

永远不会触发

库中有一个问题，因此当您在带有

背景图像的元素上运行它时，代码会变得异步（库创建一个临时
图像
元素，并侦听
加载
，不重要）

您正在将对象（

图像：{background}

）传递给

图像

道具，而不是传递图像本身（例如

图像：背景

）

因此，为了解决这些问题：

您应该删除

image.onload

侦听器，并立即调用

var engine=new RainyDay（{

）

我对库的代码进行了更改（在下面的codesandbox中），因此它将接受初始化后的回调

onInitialized

，只有在初始化结束后才会调用

这是组件的最终代码：

从“React”导入React；
从“样式化组件”导入样式化；
从“../../resources/backgroundalt.jpg”导入背景
const Background=styled.div`
高度：100vh；
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
背景图像：url（${background}）；
溢出：隐藏；
变换原点：底部；
`;
导出默认类App扩展React.Component{
ref=React.createRef（）；
componentDidMount（）{
const image=this.ref.current；
var引擎=新雨天({
形象,，
模糊：30，
初始化：（）=>{
引擎雨（[[1,2,8000]]）；
引擎雨（[[3,3,0.88]，[5,5,0.9]，[6,2,1]]，100）；
}
});
}
render（）{
返回；
}
}

您可以在此处获取我的库版本：

工作演示：