如何将外部库RainyDay.js添加到我的项目中？

Question

所以我对React还是很陌生，我只是创建一个项目，定义一个背景图片，我想知道如何使用库https://mubaidr.js.org/rainyday.js/？在react中添加外部库时，如何添加它和有什么好的习惯？

谢谢！

Answer 1

该项目在npm上不可用，因此您无法像使用其他模块那样安装它。您可以将其包含在script标记中，或将源复制到您自己的项目中并以这种方式包含它。

要使用它，您可以在图像上放置ref，并在RainyDay生命周期挂钩中使用图像作为image选项创建componentDidMount对象。 / p>

示例

class App extends React.Component {
  ref = React.createRef();

  componentDidMount() {
    const image = this.ref.current;

    image.onload = function() {
      new RainyDay({
        image
      });
    };

    image.crossOrigin = "anonymous";
    image.src = "https://picsum.photos/200";
  }

  render() {
    return <img ref={this.ref} src="" />;
  }
}