Как вызвать третью сторону javascript функций в ReactJS

Question

У меня есть сторонний javascript файл app.js, который содержит приведенный ниже фрагмент

(function ($) {
    "use strict";

    // json for properties markers on map
    var props = [];

    // custom infowindow object
    var infobox = new InfoBox({
        disableAutoPan: false,
        maxWidth: 202,
        pixelOffset: new google.maps.Size(-101, -285),
        zIndex: null,
        boxStyle: {
            background: "url('images/infobox-bg.png') no-repeat",
            opacity: 1,
            width: "202px",
            height: "245px"
        },
        closeBoxMargin: "28px 26px 0px 0px",
        closeBoxURL: "",
        infoBoxClearance: new google.maps.Size(1, 1),
        pane: "floatPane",
        enableEventPropagation: false
    });

    // function that adds the markers on map
    var addMarkers = function (props, map) {}
    
    })(jQuery)

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

 loadScript(src) {
        const script = document.createElement("script");
        script.src = src;
        script.async = false;
        document.body.appendChild(script);
    }

и

this.loadScript('js/app.js');

, но теперь я хочу получить доступ к функции addMarkers из компонента reactJS, кажется, window.functionName не будет работать, так как я могу этого добиться?

Примечание : app.js загружается и в другие компоненты

Answer 1

Вы не можете, эта функция определяется в закрытии самоисполняющейся функции. Смысл использования таких самовыполняющихся функций состоит в том, чтобы остановить локальные переменные, загрязняющие пространство имен окна.

Тот факт, что jQuery передается в качестве параметра, делает вид, будто этот скрипт создает плагин jQuery но вы разместили только фрагмент кода. Если это плагин jQuery, вы обычно получаете доступ к нему через объект jQuery или ярлык $ object, но в вашем вопросе недостаточно информации, чтобы знать. нужно смешивать jQuery с современными фреймворками, такими как React. Вы уверены, что вам нужен этот скрипт, чтобы делать то, что вы хотите? Разве вы не можете напрямую вызвать API Карт Google, чтобы избавиться от необходимости в jQuery?

Answer 2

Чтобы выполнить мое требование, мне пришлось инициализировать глобальную переменную в компоненте реакции, а затем получить к ней доступ из функции javascript через некоторое время ожидания, не лучший ... но единственный способ, который я нашел

componentDidMount(){
window.properties=[] //global variable accessible from 3rd party JS file
 this.setState({ property: this.props.location.property }, () => {
   propertyService.incView(this.state.property.property_id)
    window.properties.push(this.state.property)
 })
}

и в стороннем файле javascript I l oop в массиве properties и обрабатываем их по мере необходимости