反应外部javascript集成

Question

我正在尝试合并我发现的2个项目： https : //github.com/danxfisher/MeetEasier和此页面https://tympanus.net/Development/Interactive3DMallMap/

我已经完成了react项目会议的更改，并包括了来自interactivemallmap的html部分（具有我对React和Abd的一点了解）。 我在从main.js（interactivemallmap）调用javascript时遇到问题。 这是问题所在：第一次使用chromedev加载页面时，我看到在main.js中它获取了值，但是当我回想值为null的函数时，原始的main.js就这样开始并进行点工作：

  ;(function(window) {
     ...
     mall = document.querySelector('.mall'),
     ...
     pins = [].slice.call(mallLevelsEl.querySelectorAll('.map__space')),
     ....
     pins.forEach(function(pin) {
                var contentItem = contentEl.querySelector('.content__item[data- space="' + pin.getAttribute('data-space') + '"]');

            pin.addEventListener('mouseenter', function() {
                //if( !isOpenContentArea ) {
                    classie.add(contentItem, 'content__item--hover');
            //}
            });
     ....
     })(window);

我已经尝试过$（document）.ready（function（）{而不是;（function（window）{），但是它不起作用或更好：在第一页加载中它会得到它的值，但是当我通过时鼠标移过，事件mouseenter触发所有值均未定义

我认为这不是正确的方法，但是我如何使其起作用？

Answer 1

我没有足够的代码来完全理解正在发生的事情，但是看到您正在尝试合并具有不同代码库的两个大项目，如果我愿意的话，我应该把它放慢一点，然后再退一步。

你的问题：

主要问题在于，要使用React，您首先应该对它在幕后所做的事情有基本的了解。

您正在尝试使用React来实现jQuery（一个DOM库），但这将不容易实现，因为React可以与称为虚拟DOM的东西一起使用，并且除非具有特殊的命令，否则它无法访问常规DOM节点。这样做（例如，使用react-dom包中的findDOMNode可以解决此问题）。

您应该做什么：

请先阅读文档： https : //reactjs.org/docs/hello-world.html

然后，在您了解React之后，尝试逐步在其中实现SVG映射。

只是一个小见识：

在您的render方法中渲染SVG，或者尝试使用D3（ https://d3js.org/ ）重建它，这只是有关如何处理复杂SVG的建议。

假定您将需要访问地图节点，则应该处理来自componentDidMount生命周期中main.js大多数逻辑。