Как использовать библиотеки, установленные с помощью тегов <script>в React - PullRequest
Новая
       51

Как использовать библиотеки, установленные с помощью тегов <script>в React

0 голосов
/ 09 июля 2019

Я пытаюсь создать приложение Facebook Instant HTML5 в React.

В соответствии с их документацией по быстрому запуску , они хотят, чтобы я установил их 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 распознать это?

Ответы [ 2 ]

0 голосов
/ 09 июля 2019

Как вы объяснили, вы получаете эту ошибку, потому что компилятор машинописного текста не распознает FBInstant, поскольку он не установлен.

Однако в этом случае, похоже, все, что вам нужно, это заставить компилятор игнорироватьэто предупреждение.Наиболее подходящим, на мой взгляд, является экспорт в отдельный файл js (а не ts / tsx), поскольку это код JavaScript.Чем импортировать его как любой модуль узла.

Если вам не нравится эта опция, альтернативные методы могут быть:

  1. , включая код SDK на вашем index.html, сразу после вашегоscript tag
  2. Использование @ts-ignore для подавления ошибок машинописи
  3. определение FBInstant перед сценарием SDK (подробнее об этом здесь ) 
interface Window {
  [key:string]: any; // Add index signature
}
const FBInstant = (window as Window)['FBInstant'];
0 голосов
/ 09 июля 2019

После того, как вы добавили тег сценария fbinstant в index.html

В вашем src/index.tsx, добавьте его вверху (перед вашим фрагментом): 

const FBInstant = window.FBInstant;
...