Реакция - преобразование тега сценария HTML для асинхронной загрузки SDK

Question

В настоящее время я пытаюсь добавить Snapchat на сайт через их SDK

. Моя текущая попытка не может понять, как преобразовать их скрипт Dom в функцию, вызываемую при загрузке моего компонента:

export function snapchatSDK() {
  return new Promise(resolve => {
    const script = document.createElement('script');
    script.src = 'https://sdk.snapkit.com/js/v1/create.js';
    document.head.append(script);
  });

}

class Platforms extends React.Component {

  componentDidMount() {
    snapchatSDK();
  }

render() {
    return (
      <div>
      <p> Share on Social Media Platforms</p>
      <h4>Snapchat<h4>
       <button 
         className="snapchat-creative-kit-share"
         data-share-url= urlTobeShared()
          >
         Share me 
       </button>

       <h4>Twitter<h4>
       <button>
         Share me 
       </button>

      <h4>Reddit<h4>
       <button>
         Share me 
       </button>
      </div>
    );
  }
}

Вот ссылка на do c: snap do c

Answer 1

Я думаю, что главная проблема в том, как вы пытаетесь загрузить скрипт динамически. Я предполагаю, что это то, что вы хотите сделать. Если это так, есть еще несколько шагов. Вот ссылка на сравнительный пример, который проходит через некоторые из них: https://www.newline.co/fullstack-react/articles/Declaratively_loading_JS_libraries

Answer 2

Ваш пример не очень ясно дает понять, что вы пытаетесь выполнить sh, но, возможно, один из них поможет вам разобраться?

Вариант 1

Попробуйте Неофициальный Snapchat npm пакет . (не знаю, если пакет делает то, что вам нужно, купите, может быть, вы еще не видели его?)

Вариант 2

Загрузите скрипт в ваш HTML

<script src="https://sdk.snapkit.com/js/v1/create.js" />
<script src="/path/to/your/bundle.js" />

Если он загружен до монтирования компонентов, он должен взять ваш HTML и сделать все, что он делает

Опция 3

Возможно, попробуйте установить async = false в сценарии:

const script = document.createElement('script');
script.src = 'https://sdk.snapkit.com/js/v1/create.js';
script.async = false
document.head.append(script);

Пожалуйста, смотрите эту статью и эту ТАК сообщение . Вывод ключа:

Сценарии, которые динамически создаются и добавляются в документ, имеют асин c по умолчанию

Answer 3

Если вы используете parcel2 или webpack4 (или create-реагировать-приложение), то вы можете использовать динамический c импорт и, что самое важное, без этой проблемы

Однако код просто

    import("https://sdk.snapkit.com/js/v1/create.js").then(_snap =>
      setSnap(_snap)
    );

если вы столкнулись с этой проблемой, вы можете использовать

    import(/* webpackIgnore: true */ "https://sdk.snapkit.com/js/v1/create.js").then(
      _snap => setSnap(_snap)
    );