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

IT技术 javascript reactjs
2021-05-01 08:27:44

所以我对 React 很陌生,我只是创建了一个项目,定义了一个背景图像,我想知道如何使用库https://mubaidr.js.org/rainyday.js/如何添加它以及在 React 中添加外部库时有哪些好的做法。

提前致谢 !

1个回答

这个项目在 npm 上不可用,所以你不能像你习惯的其他module一样安装它。您可以将它包含在script标签中,或者将源复制到您自己的项目中并以这种方式包含它。

要使用它,您可以ref在图像上放置一个,并RainyDay使用图像作为生命周期钩子中image选项创建对象componentDidMount

例子

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="" />;
  }
}