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

Question

I've encountered an issue recently where I want to use a 3rd party plugin in my nextjs practice project. Please note that I'm a React beginner, therefore, I'm having a hard time wrapping my mind around the 'react way' of doing things.

My problem is that I do not know how to properly initialize/configure a plugin in a project.

For example, I want to use this smoothscroll js plugin. The regular static site approach is to add a script tag in the html files, and then initialize it by calling the plugin. eg:

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

But in react, this approach does not work because of the virtual DOM. Any pointers would be greatly appreciated!

Answer 1

Instead of writing this in your script tag, in your app.js, where you main app is being initialized. In it's componentDidMount hook add this.

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

I am using here, that you include 'GambitSmoothScroll` at the top of your code. In order for this to use.

Answer 2

通常我们在React中使用npm或yarn来管理软件包 。在这个特定的第三方中，我建议您阅读本网站的“ 平滑滚动”，您可以在终端中运行它来添加它。

npm install --save smoothscroll