Question

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

通常我会：

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

<script src="http://path/to/script/utag.js" />
然后我可以与库进行交互，只要它已经加载，我可以使用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

axis

了解上面提供的Component内部的声明非常重要。 import someLibrary from 'some-library'; class App extends React.Component { componentDidMount() { someLibrary(); } render() { return <div />; } }是一个生命周期方法，在将Component渲染到屏幕后自动调用。然后在里面调用你的someLibrary（）。根据您所讨论的第三方库的类型，将决定您可能还需要传递给某些图书馆（）。

这就是Reactjs与第三方库交互的方式，因为通常第三方库不知道如何进入React生态系统。他们不知道componentDidMount()方法是什么或JSX是什么。因此，这是使第三方库与React很好地协同工作的一般方法。

Answer 2

如果您使用的是create-react-app，则webpack正在用于捆绑您的JavaScript。关于使用create-react-app安装依赖项的Here's the documentation。

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

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

import someLibrary from 'some-library';

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

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

Answer 3

根据this issue on GitHub，如果您使用的是create-react-app，如果您想使用在您的react脚本中的index.html文件中导入或创建的全局变量，则必须使用window.variable_name。< / p>

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

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

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

3 个答案: