javascript - 类型错误 : dropdown is null when trying to access Dom element in reactjs

Question

请在react中遇到此错误，好的，导入一些外部js文件，在该文件中进行某种Dom操作，例如添加css类和从我的模板中删除css类。问题是，当我的类 App.js 加载时，它给我一个错误，提示未找到下拉类，根据我自己的理解，我认为是因为组件尚未渲染。简而言之，请有人帮助我。提前致谢。

js代码

var dropdown = document.querySelector('.modal');
dropdown.addEventListener('click', function(event) {
  event.stopPropagation();
  dropdown.classList.toggle('is-active');
});        

我得到的错误

    TypeError: dropdown is null
./src/modules/Restaurants/utils/main.js
C:/Users/user/Desktop/fungry/fungry/src/modules/Restaurants/utils/main.js:2

  1 | var dropdown = document.querySelector('.dropdown');
> 2 | dropdown.addEventListener('click', function(event) {
  3 |   event.stopPropagation();
  4 |   dropdown.classList.toggle('is-active');
  5 | });

非常感谢

Answer 1

您应该在 .modal 元素所在的 ReactJS 类的 componentDidMount 函数中编写此代码。

componentDidMount(){
    var dropdown = document.querySelector('.modal');
    dropdown.addEventListener('click', function(event) {
        event.stopPropagation();
        dropdown.classList.toggle('is-active');
    });   
}

顺便说一下，你应该使用react的onClick属性，而不是像这样绑定(bind)点击函数