如何使用通過安裝的庫<script> tags in React

Question

我正在嘗試在React中創建一個Facebook Instant HTML5應用程序。

根據他們的快速入門文檔，他們希望我使用腳本標簽安裝SDK，如下所示：

<script src="https://connect.facebook.net/en_US/fbinstant.6.3.js"></script>

我已經使用create-react-app創建了我的應用create-react-app 。 我將該代碼段放置在/public/index.html內，如下所示：

...
<body>
    <noscript>You need to enable javascript to run this app.</noscript>
    <script src="https://connect.facebook.net/en_US/fbinstant.6.3.js"></script>
...

他們還提供以下代碼段：

// Once all assets are loaded, tells the SDK 
// to end loading view and start the game
FBInstant.startGameAsync()
  .then(function() {
  // Retrieving context and player information can only be done
  // once startGameAsync() resolves
  var contextId = FBInstant.context.getID();
  var contextType = FBInstant.context.getType();

  var playerName = FBInstant.player.getName();
  var playerPic = FBInstant.player.getPhoto();
  var playerId = FBInstant.player.getID();

  // Once startGameAsync() resolves it also means the loading view has 
  // been removed and the user can see the game viewport

  game.start();
});

我已經放在src/index.tsx' 。

然后這給了我錯誤，說：

  'FBInstant' is not defined  no-undef

這可能意味着該庫未正確安裝/未帶入正確的名稱空間，以便我的React代碼可以訪問它。

我該如何解決？ Facebook告訴我不要自己下載並包含它-他們會拒絕我的應用程序。

重要筆記：

不要下載SDK並將其添加到您的捆綁軟件中，因為它將在以后的步驟中被拒絕。

這是在Facebook上構建游戲的新方法，並且不支持Graph API。

所以看來我必須使用這些<script>標記。 如何讓React識別它？

Answer 1

在index.html添加fbinstant腳本標記后

在src/index.tsx ，將其添加到頂部（在代碼段之前）：

const FBInstant = window.FBInstant;

Answer 2

如您所解釋的，您將收到此錯誤，因為打字稿編譯器無法識別FBInstant ，因為它尚未安裝。

但是，在這種情況下，您似乎所需要的只是使編譯器忽略這些警告。 我認為最合適的是將其導出到單獨的js文件（而不是ts / tsx ），因為它是JavaScript代碼。 而不是將其導入為任何節點模塊。

如果您不喜歡此選項，則可以使用以下替代方法：

包括script標記之后的index.html上的SDK代碼
使用@ts-ignore抑制打字稿錯誤
定義FBInstant的SDK腳本之前（更多相關信息點擊這里）

interface Window {
  [key:string]: any; // Add index signature
}
const FBInstant = (window as Window)['FBInstant'];

如何使用通過安裝的庫<script> tags in React

問題描述

2 個解決方案

解決方案1
0 2019-07-09 09:53:36

解決方案2
0 2019-07-09 10:01:31

如何使用通過安裝的庫<script> tags in React

問題描述

2 個解決方案

解決方案1 0 2019-07-09 09:53:36

解決方案2 0 2019-07-09 10:01:31

解決方案1
0 2019-07-09 09:53:36

解決方案2
0 2019-07-09 10:01:31