如何在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 />;
  }
}