javascript - TypeError：null 不是对象（评估“overlay.addEventListener”）

Question

我正在做一个大项目，但我遇到了一个错误。

这是一个弹出窗口。

我将它添加到我的应用程序 js 文件中。

在我添加之前，一切都很顺利，但现在我遇到了错误。

如果有人知道我的问题是什么，请告诉我。

它应该如下所示：

这是我的代码，我从 HTML、CSS 和 JS 教程中复制了它：

import React from 'react';
import "./Popup.styles.css";

function Popup() {
    
    const openModalButtons = document.querySelectorAll('[data-modal-target]')
    const closeModalButtons = document.querySelectorAll('[data-close-button]')
    const overlay = document.getElementById('overlay')

    openModalButtons.forEach(button => {
    button.addEventListener('click', () => {
        const modal = document.querySelector(button.dataset.modalTarget)
        openModal(modal)
    })
    })

    overlay.addEventListener('click', () => {
    const modals = document.querySelectorAll('.modal.active')
    modals.forEach(modal => {
        closeModal(modal)
    })
    })

    closeModalButtons.forEach(button => {
    button.addEventListener('click', () => {
        const modal = button.closest('.modal')
        closeModal(modal)
    })
    })

    function openModal(modal) {
    if (modal == null) return
    modal.classList.add('active')
    overlay.classList.add('active')
    }

    function closeModal(modal) {
    if (modal == null) return
    modal.classList.remove('active')
    overlay.classList.remove('active')
    }
    
    return (
        <div>
            <button data-modal-target="#modal">Open Modal</button>
            <div class="modal" id="modal">
                <div class="modal-header">
                    <div class="title">Example Modal</div>
                    <button data-close-button class="close-button">&times;</button>
                </div>
                <div class="modal-body">
                    Lorem ipsum...
                </div>
            </div>
        </div>
    )
}

export default Popup

这是我得到的错误：

TypeError: null is not an object (evaluating 'overlay.addEventListener')
Popup
src/Popup.js:17
  14 | })
  15 | })
  16 | 
> 17 | overlay.addEventListener('click', () => {
     | ^  18 | const modals = document.querySelectorAll('.modal.active')
  19 | modals.forEach(modal => {
  20 |     closeModal(modal)

请回答，你不会伤​​害我的感情。

先感谢您！

埃米尔

标签： javascriptreactjs