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

Question

我是React的新手，正在寻找与JQuery方法等效的React，以在整个应用程序中包括分析。

通常，我会：

1. 在html页面上包含第3方库。 放在index.html页面上很容易，但是我不知道这是否是最佳实践。

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

2. 然后，只要加载了库就可以与它进行交互，可以使用JQuery window.load进行验证。 这个脚本可以在纯HTML页面上正常运行，但是我试图在我的react应用程序中找到等效的最佳实践方法。 我不想引入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

根据GitHub上的此问题，如果您使用的是create-react-app，则要在react脚本中使用在index.html文件中导入或创建的全局变量，则必须使用window.variable_name。

在您的情况下，这可能会起作用

import React from "react"
class App extends React.Component {
    componentDidMount() {
        window.utag.link({ "event_name" : "locale_select", "language" : 
    window.utag_data.language, "currency" : window.utag_data.currency } );
    }

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

Answer 2

import someLibrary from 'some-library';

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

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

了解上面提供的组件中的语句很重要。 componentDidMount()是一个生命周期方法，在将组件呈现到屏幕后会自动调用它。 然后在其中调用您的someLibrary（）。 根据您所讨论的第三方库的类型，将决定您还需要将哪些内容传递给someLibrary（）。

这就是Reactjs与第三方库交互的方式，因为通常第三方库不知道如何进入React生态系统。 他们不知道什么是render()方法或什么是JSX。 因此，这是使第三方库与React良好配合的通用方法。

Answer 3

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

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

因此，请使用npm install some-library 。 将其导入文件并从组件调用它：

import someLibrary from 'some-library';

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

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