Как добавить скрипт в компонент React и использовать его в качестве функции-конструктора

Я пытаюсь загрузить внешний javascript (https://github.com/spite/ccapture.js) к моему компоненту React.js.

В настоящее время код выглядит так:

let aScript = document.createElement('script');
aScript.type = 'text/javascript';
aScript.src = "CCapture.min.js";
document.head.appendChild(aScript);

Этот код правильно добавляет скрипт на страницу (проверил HTML). Но теперь мне интересно, как я могу использовать содержимое скрипта в функции-конструкторе. В частности, по документации - это будет выглядеть примерно так.

var capturer = new CCapture({
    framerate: 60,
    verbose: true
});

Ошибка, которую я получаю, говорит, что CCapture не определен. Я что-то упустил здесь? Не уверен, как вытащить из самой библиотеки.

Я добавил функцию, чтобы убедиться, что она загружается до того, как сама функция запустится в соответствии с этой инструкцией, https://stackoverflow.com/a/42848407/8497330.

Я также не использую пакет npm, потому что он не работает для формата 'webm'. Ищу бандаж, пока npm пакет поправят.


reactjs javascript constructor webm
person Faye Hayes    schedule 09.04.2018    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Прежде всего, вы должны загрузить свой скрипт асинхронно. Например, вы можете использовать этот gist: loadScript. Эта функция loadScript возвращает обещание, которое вы можете использовать, чтобы дождаться загрузки вашей библиотеки. Во-вторых, вы не должны помещать свой код внутрь конструктора, а вместо этого в componentDidMount вот так

componentDidMount () {
    loadScript('CCapture.min.js')
      .then(() => {
        var capturer = new CCapture({
          framerate: 60,
          verbose: true
        });
      })
      // you can even handle the loading error for your script
      .catch((error) => {
        console.log('Error when loading CCapture.min.js: ', error);
      });
}

Если вам это нужно, вы также можете сохранить экземпляр capturer в состоянии вашего компонента (используя this.setState({capturer})) или непосредственно внутри объекта экземпляра вашего компонента, например this.capturer = capturer;

person Mehran Hatami    schedule 09.04.2018

arrow_upward
0
arrow_downward

Наиболее вероятная причина заключается в том, что скрипт не был загружен и оценен браузером до того, как вы сделаете вызов. Это отличное (и подробное) описание того, что происходит в этом ответе: https://stackoverflow.com/a/14786759/105518

По моему опыту, последний совет в этом ответе, как правило, наименее болезненный для реализации: используйте функцию JQuery getScript. Он обрабатывает подключение всех битов для вас:

$.getScript("CCapture.min.js", function () {
    const capturer = new CCapture({
        framerate: 60,
        verbose: true
    });
});
person Marc LaFleur    schedule 09.04.2018