如何在React应用程序中包含第三方js库

Question

我是React的新手,我正在寻找React等效的JQuery方法,在我的应用程序中包含分析.

通常我会:

1. 在html页面上包含第三方库.很容易进入index.html页面,但我不知道这是否是最佳做法.

   <script src="http://path/to/script/utag.js" />

2. 然后我可以与库交互,只要它已经加载,我可以使用JQuery window.load验证.这个脚本在普通的html页面上运行正常,但我试图在我的反应应用程序中找到相同的最佳实践方法.我不想介绍jquery,目前我的React容器会告诉我,如果我尝试utag在函数中引用,那么utag没有定义.

   <script> $(window).load(function() { utag.link({ "event_name" : "locale_select", "language" : utag_data.language, "currency" : utag_data.currency } ); }); </script>

我是React的新手,所以任何帮助都会很棒.我知道我的项目没有使用webpack,它使用的是react-scripts并且是使用create-react-app实用程序启动的.

Answer 1

如果您正在使用create-react-app，则webpack用于捆绑您的 javascript。这是有关安装依赖项的文档create-react-app。

要包含您的库，您应该将其安装为npm package，并将其导入到您要使用它的文件中。Webpack 会将其包含在捆绑包中，并且一切都应该正常工作。

因此，安装库npm install some-library。将其导入到文件中并从组件中调用它：

import someLibrary from 'some-library';

class App extends React.Component {
  componentDidMount() {
    someLibrary();
  }

  render() {
    return <div />;
  }
}