Как использовать библиотеки, установленные через теги ‹script› в React

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

Согласно их документации по быстрому запуску, они хотят, чтобы я чтобы установить их SDK с помощью тега script, например:

<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 распознать это?


reactjs typescript javascript html facebook-instant-games
person haz    schedule 09.07.2019    source источник
comment
Может быть, попробуйте добавить его в тег заголовка   -  person blonial    schedule 09.07.2019
comment
Думаю, эта статья вам очень поможет: dev.to/abvishek/   -  person Kobe    schedule 09.07.2019

Ответы (2)


arrow_upward
1
arrow_downward

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

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

const FBInstant = window.FBInstant;
person Mohammad Dohadwala    schedule 09.07.2019

arrow_upward
0
arrow_downward

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

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

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

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