如何在React應用程序中包含第三方js庫

我是React的新手，並且正在尋找此JQuery方法的React等價物，以在整個應用程序中包括分析。如何在React應用程序中包含第三方js庫

通常我會：

包含在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>

我是新來的反應，以便任何幫助將是巨大的。我知道我的項目沒有使用webpack，而是使用react-scripts，並開始使用create-react-app工具。

來源

2017-08-30 user1521567

如果您使用的是create-react-app，則webpack正在用於捆綁您的javascript。 Here's the documentation安裝依賴關係create-react-app。

要包含您的庫，您應該將其安裝爲npm包，並將其導入到要使用它的文件中。 Webpack會將它包含在捆綁包中，一切都應該正常工作。

所以，安裝庫npm install some-library。將其導入到一個文件，並從一個組件調用它：

import someLibrary from 'some-library'; 

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

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

來源

2017-08-30 00:09:18 elas

所以我想包含的腳本不能作爲npm包使用。還需要從CDN提供服務。是否有可能將其包含在索引頁面中並將其引用到組件中？ – user1521567

import someLibrary from 'some-library'; 

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

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

其重要的是瞭解上面提供的組件內部的說法。 componentDidMount（）是一個生命週期方法，在組件被渲染到屏幕後被自動調用。然後在它裏面調用你的someLibrary（）。根據您所談論的第三方庫類型的不同，將決定您可能需要傳遞給someLibrary（）的內容。

這就是Reactjs與第三方庫的交互方式，因爲通常第三方庫不知道如何進入React生態系統。他們不知道render（）方法或JSX是什麼。所以這是使第三方庫與React很好地協作的一般方法。

來源

2017-09-26 13:48:20 Daniel

如何在React應用程序中包含第三方js庫

回答

相關問題