Question

我正在尝试在React中创建一个Facebook Instant HTML5应用程序。

根据他们的Quick Start documentation，他们希望我使用脚本标签安装SDK，如下所示：

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

我已经使用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

一旦在fbinstant中添加了index.html脚本标签

在您的src/index.tsx中，将其添加到顶部（在代码段之前）：

const FBInstant = window.FBInstant;

Answer 2

正如您所解释的，由于打字稿编译器无法识别FBInstant，因为尚未安装，因此您会收到此错误。

但是，在这种情况下，您似乎需要使编译器忽略这些警告。我认为最合适的方法是将其导出到单独的js文件（而不是ts / tsx）中，因为它是JavaScript代码。而不是将其导入为任何节点模块。

如果您不喜欢此选项，则可以使用以下替代方法：

在index.html标签之后的script上包含SDK代码
使用@ts-ignore抑制打字稿错误
在SDK脚本之前定义FBInstant（有关此here的更多信息）

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

如何使用通过React中的<script>标签安装的库

2 个答案: