javascript - 如何在反应中使用其他 js 插件？

Question

我最近遇到了一个问题，我想在我的 nextjs 练习项目中使用 3rd 方插件。请注意，我是一名 React 初学者，因此，我很难将自己的想法集中在做事的“反应方式”上。

我的问题是我不知道如何正确初始化/配置项目中的插件。

例如，我想使用这个smoothscroll js 插件。常规静态站点的做法是在html文件中添加一个script标签，然后调用插件进行初始化。例如：

<script type="text/javascript">
new GambitSmoothScroll({
    amount: 150, // The scroll amount
    speed: 900 // The scroll speed
});
</script>

但是在反应中，由于虚拟 DOM，这种方法不起作用。任何指针将不胜感激！

score 1 · Accepted Answer

而不是在你的标签中写这个script，在你的 app.js 中，你的主应用程序正在被初始化。在它的componentDidMount钩子中添加这个。

componentDidMount () {
  new GambitSmoothScroll({
    amount: 150, // The scroll amount
    speed: 900 // The scroll speed
  });
}

我在这里使用的是，您在代码顶部包含“GambitSmoothScroll”。为了这个使用。

score 1 · Accepted Answer

通常我们在 React 中使用 npm 或 yarn 来管理包。我这个特殊的第 3 方，我建议你阅读这个网站smoothscroll 你可以在你的终端中运行它来添加它。

npm install --save smoothscroll

2 回答 2