react外部javascript集成

我正在尝试合并我发现的两个项目： 和 本页

我已经在react项目Meetasier中做了更改，并包含了interactivemallmap中的html部分（利用我的react abd nodejs知识）。我在从main.js（interactivemallmap）调用javascript时遇到问题。 问题是： 我第一次用chromedev加载页面时，看到main.js中有值，但当我调用函数时，值为null： original main.js是这样开始的，dot work：

  ;(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触发之后，所有的值都没有定义

---

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

我没有足够的代码来完全理解正在发生的事情，但是看到您正试图用不同的代码库合并两个大项目，如果我是您，我应该慢慢来，并退一步

你的问题：

主要问题是，要使用React，您首先应该对它在引擎盖下的工作有一个基本的了解

您正试图用React实现jQuery（一个DOM库），但是，这并不容易，因为React使用的是一种称为虚拟DOM的东西，并且除非特别要求，否则它无法访问常规DOM节点（例如，使用

react-dom

包中的

findDOMNode

处理这个问题）

你应该做什么：

请先阅读文件：

然后，在理解React之后，尝试在其中一步一步地实现SVG映射

只是一个小小的洞察：

在

render

方法中呈现SVG，或者尝试使用D3（）重新构建SVG，例如，只是关于如何处理复杂SVG的建议

---

假设您需要访问映射节点，那么您应该处理

componentDidMount

生命周期中

main.js

中的大部分逻辑。

Tanks为了回答这个问题，我在这里上传了一个视频，也许您能更好地理解我的问题：如果我理解得很好，那么呈现的页面（dom）js库客户端无法访问？我必须将所有的函数从main.js转换为componentDidMount？我阅读了react js上的一些文档，但我不明白我不能像在简单的index.html文件中那样使用一些js库否，react也是客户端，并且可以与许多不同的js库配合使用，b但不适用于使用DOM的库。React不能直接使用DOM。在使用React之前，首先要学习React，尝试使用

create React app

。现在，大多数Javascript都是使用Node.js通过模块加载的，你不能简单地通过脚本标记加载，因为对于大多数前端开发已经改变的方式，请从以下内容开始：