时间戳

首页 > 解决方案 > 如何在 ReactJS 中调用第三方 javascript 函数

javascript - 如何在 ReactJS 中调用第三方 javascript 函数

问题描述

我有一个第三方 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');

但是现在我想从 reactJS 组件中访问该功能addMarkers，它似乎window.functionName不起作用，那么我该如何实现呢？

注意：app.js也在其他组件中加载

标签： javascriptreactjs

解决方案

您不能，该函数是在自执行函数的闭包内定义的。像这样使用自执行函数的目的是阻止局部变量污染窗口命名空间。

jQuery 作为参数传入的事实使它看起来像这个脚本创建了一个 jQuery 插件，但您只发布了代码片段。如果它是一个 jQuery 插件，您通常会通过 jQuery 对象或它的快捷方式 $ 对象访问它，但您的问题中没有足够的信息需要知道。

附带说明一下，将 jQuery 与 React 等现代框架混合使用通常是不受欢迎的。你确定你需要这个脚本来做你想做的事吗？不能直接调用 Google Maps API 来消除对 jQuery 的需要吗？

推荐阅读