Блог

Главная - Вопросы по программированию - Реагировать — устанавливать состояние компонента из внешнего скрипта

Реагировать — устанавливать состояние компонента из внешнего скрипта

#javascript #reactjs

#javascript #reactjs

Вопрос:

У меня есть проект React, и я хочу добавить внешний скрипт в приложение:

 <script async src="https://geowidget.easypack24.net/js/sdk-for-javascript.js"></script>
<link rel="stylesheet" href="https://geowidget.easypack24.net/css/easypack.css"/>

и вызывает метод:

 <script type="text/javascript">
window.easyPackAsyncInit = function () {
    easyPack.init({});
    var map = easyPack.mapWidget('easypack-map', function(point){
        console.log(point);
    });
};
</script>

<div id="easypack-map"></div>

Я сделал это так:

 componentDidMount() {
    const script1 = document.createElement("script");
    script1.src = "https://geowidget.easypack24.net/js/sdk-for-javascript.js";
    script1.async = true;
    document.body.appendChild(script1);

    const script2 = document.createElement("script");
    script2.type = 'text/javascript';
    script2.async = true;
    script2.innerHTML = "window.easyPackAsyncInit = function () {easyPack.init({});var map = easyPack.mapWidget('easypack-map', function (point) {console.log(point);});};";
    document.body.appendChild(script2);
}

Он работает, но я хочу использовать возвращаемое значение функции point в моем компоненте (использовать его как состояние компонента)

Ответ №1:

вариант 1 вызов из другого скрипта: просто откройте this.setState метод в окне и вызовите этот метод, чтобы обновить его состояние

 
componentDidMount() {
  window.setPoint = (point)=>this.setState('point',point)
}

// open console and run setPoint(xxx) and check the UI change

вариант 2 вызовите метод expose и вызовите из react, как вы это делали, но все может быть лучше

 <script async src="https://geowidget.easypack24.net/js/sdk-for-javascript.js"></script>
<link rel="stylesheet" href="https://geowidget.easypack24.net/css/easypack.css"/>

вы можете добавить их в свой <head> тег шаблона, html-файл или html-плагин в webpack, добавление с помощью скрипта может привести к повторениям

тогда вам просто нужно

 componentDidMount() {
    easyPack.init({});
    var map = easyPack.mapWidget('easypack-map', (point)=>{
        console.log(point);
        this.setState('point',point)
    });

Ответ №2:

Хорошо, я нашел решение. Установите window.point в функции, а затем прочитайте window.point в компоненте

 script2.innerHTML = "window.easyPackAsyncInit = function () {easyPack.init({});var map = easyPack.mapWidget('easypack-map', function (point) {window.point = point);});};";

Но является ли это лучшим решением?