Javascript TypeError:尝试访问reactjs中的Dom元素时，下拉列表为null

请注意，我在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 | });

---

将等待，非常感谢您应该在

componentDidMount

函数中编写此代码，

.modal

元素位于该类中

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

---

顺便说一下，您应该使用react的

onClick

属性，而不是像这样绑定click函数

您应该在reactjs类的

componentDidMount

函数中编写此代码，

.modal

元素位于该类中

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

---

顺便说一下，您应该使用react的

onClick

属性，而不是像这样绑定click函数

您需要显示更多的代码。你能包括你的全部反应成分吗<代码>下拉列表很可能为

null

，因为它尚未像您所说的那样呈现，因此尝试调用它上的

addEventListener

将导致错误。您需要显示更多代码。你能包括你的全部反应成分吗

下拉列表很可能是
null
，因为它还没有像您所说的那样呈现出来，所以尝试调用
addEventListener
会导致错误。