时间戳

首页 > 解决方案 > 如何在我的 React 项目中导入为 JQuery 设计的小部件？

javascript - 如何在我的 React 项目中导入为 JQuery 设计的小部件？

问题描述

我正在尝试在我的 React projet 中导入为 JQuery 设计的这个小部件：

<script type="text/javascript" src="https://widget.mondialrelay.com/parcelshop-picker/jquery.plugin.mondialrelay.parcelshoppicker.min.js">
</script>

这个小部件需要 JQuery 才能工作，所以我还使用 Google CDN 加载 JQuery：

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

该文档是为 JQuery 编写的，并显示了使用小部件的示例：

HTML

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
<head>
<title>Mondial Relay Parcelshop Picker with Map</title>
<!-- JQuery required (>1.6.4) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!-- Leaflet dependency is not required since it is loaded by the plugin -->
<script src="//unpkg.com/leaflet/dist/leaflet.js"></script>
<link rel="stylesheet" type="text/css" href="//unpkg.com/leaflet/dist/leaflet.css" />
<!-- JS plugin for the Parcelshop Picker Widget MR using JQuery -->
<script src="//widget.mondialrelay.com/parcelshop-picker/jquery.plugin.mondialrelay.parcelshoppicker.min.js"></script>
</head>
<body>
<!-- HTML Element in which the Parcelshop Picker Widget is loaded -->
<div id="Zone_Widget"></div>
<!-- HTML element to display the parcelshop selected, for demo only. Should use hidden instead. -->
<input type="text" id="Target_Widget" />
</body>
</html>

JAVASCRIPT：

```
    $(document).ready(function () {  
    $("#Zone_Widget").MR_ParcelShopPicker({  
    Target: "#Retour_Widget",  
    Brand: "BDTEST  ",
    Country: "FR",   
    EnableGmap: true  
    });  
    }); 
```

我真的不知道该怎么做。我已经尝试了 3 天，但我仍然被阻止。

非常感谢您的帮助，我很抱歉我的英语不好。

再次感谢。

（更新）

我的代码是：

import React, { useEffect } from 'react';

const MondialRelay = () => {


  useEffect(() => {

    const jQuery = document.createElement('script');
    jQuery.src = "//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js";
    jQuery.async = "true";

    document.body.appendChild(jQuery);

    return () => {
      document.body.removeChild(jQuery);
    }
  })


  useEffect(() => {
    const scriptMr = document.createElement('script');
      scriptMr.src = "https://widget.mondialrelay.com/parcelshop-picker/jquery.plugin.mondialrelay.parcelshoppicker.min.js";
      scriptMr.async = "true";

      document.body.appendChild(scriptMr);

      return () => {
        document.body.removeChild(scriptMr);
      }
  });

  !function(){
    // Parameterized the widget
    $(document).ready(function () {  
      $("#Zone_Widget").MR_ParcelShopPicker({  
        Target: "#ParcelShopCode",
        Brand: "BDTEST  ",
        Country: "FR" 
      });  
    });
  }();

  return(
    <div>
     
      <div id="Zone_Widget"></div>

  </div>

  )
};

export default MondialRelay;

我遇到的错误是“$ 未定义”，但这是因为我尝试在 React 中使用 JQuery 语法，而 $ 从未在我的代码中定义。

我不知道如何使用#Zone_Widget id 创建这个 div。

标签： javascriptjqueryreactjswidget

解决方案

您的脚本标签中有错字，您错过了https:

将 URL 更改为https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js它应该可以工作。

作为建议，由于您已经在使用 nodejs/npm，因此您也可以使用 npm 安装 jquery。

npm install jquery

推荐阅读