我如何在我的反应页面中使用 jquery/html/css 组件答案

【问题标题】：How can i use a jquery/html/css component inside my react page我如何在我的反应页面中使用 jquery/html/css 组件
【发布时间】：2019-11-14 16:27:13
【问题描述】：

我必须在我的一个反应页面中使用使用jQuery v2.2.4、javascript、html 和css 开发的复杂且随时可用的组件，因为它是一个相当大的组件，具有许多它确实没有的功能对我们来说重新开发这个内部反应并使其成为 reacty 是没有意义的。
所以我的问题是我如何在反应中使用它？
我只是想在我的页面中间呈现这个组件，最好的方法是什么？，我对此有点陌生，我不知道从哪里开始。
这是调用上述组件的 index.html，我想也许它在某种程度上有所帮助？

<!DOCTYPE html>
<html>
<haed>
    <title>Test</title>
</haed>
<body>
    <link href="ol.css" rel="stylesheet" type="text/css" />
    <link href="ls.css" rel="stylesheet" type="text/css" />
    <script src="jquery.min.js"></script>
    <script src="ol.js"></script>
    <script src="ls.js"></script>
    <script src="wss_map.js"></script>
    <div id="map" style="width: 100%; height: 500px;"></div>
<script>
    var i = 0;
    var mp=$("#map").wssmap({
        maps: [
            {
                name: 'm2',
                type: 'osm',
                order: 0,   
                zoomrange: { min: 0, max: 19 },
                visible: true,
            }
        ],
        onClick:function(point) {
            i++;
            var options= {
                longitude:point.longitude,
                latitude:point.latitude,
                label:i
            }
            mp.addMarker(options);
        },
        zoom:10
    });
    var marker=mp.addMarker({ longitude: 51.404343, latitude: 35.715298,label:'Testcase'});
</script>
</body>
</html>

谢谢。

【问题讨论】：

我建议不要这样做。好像没有任何理由这样做。但如果必须，你应该把它放在 componentDidMount() { // 放在这里 } 或你的 useEffect(()=>{ // 这里 },[])
简单的答案是你不能使用。有很多第三方反应组件，你可以用其中一个替换你的 jquery 组件
@mstfyldz 但是这个组件是为某个客户开发的，并且确实是针对他们的需求而设计的，并且有很多功能只是为那个客户制作的，在 react 中创建它需要相当多的时间和资源，加上这是一个工作组件，真的没有选项可以在反应页面中加载这个组件吗？
这里有一个更好的解释如何实现它stackoverflow.com/questions/38518278/…

标签： javascript jquery html reactjs

【解决方案1】：

只需按照以下说明操作：

1：通过 npm 安装 JQuery： npm install jquery --save

2：在你的反应组件文件之上从 Jquery 导入 $： import $ from 'jquery';

3：现在您可以在 React componentDidMount() 上调用您的 JQuery 组件

  componentDidMount() {
    var mp=$("#map").wssmap({ ... })
  }

【讨论】：

你能看看demo.jsinisde codesandbox.io/s/…，我导入js文件正确吗？，你可以使用我的问题中的html进行比较
不行，你必须删除import "./jquery.min.js";这一行，对吧？
老实说，我从未使用过reactjs 之外的任何东西，所以我对jQuery 等没有任何经验，所以我不确定应该删除或导入哪一行，你能帮我正确加载这个组件吗？可以举个例子吗？谢谢。