Почему React не обрабатывает AddEventListener("click")?

Question

[Flesh Herbal]

Нужно обработать клик по элементу. Но результат всегда (TypeError: Cannot read property 'addEventListener' of null).
Я так понимаю он обрабатывается до того как произошла загрузка нужного компонента.
Помогите пожалуйста решить данную проблему.
код:

import './CSS/footer.css'

export function SignUp(props) {
    return(       
        <div id = "signup" className ="ferSignUp">
             <h3>Sign up <img src="img\icon-signup.png" alt="signup"></img></h3>  
        </div>
    );
}

import React, { useEffect, useRef, useState } from "react";
import {SignUp, Basket} from './FooterElements'
import './CSS/footer.css'


export default class Footer extends React.Component{
        constructor(props){
        super(props);
        this.state = {

        }
    }   
    render(){
        return(
            <div className = "fer">
                <h1>3DStore</h1>
                <div className = "ferElements">
                    <SignUp />
                    <Basket />                   
                </div>             
            </div>,
            <UseEffects/>
        );
    }
}

function UseEffects() {
    const [ons, double] = useState("none");
    const ref = useRef(ons);

    useEffect(()=>{
        const oneElem = document.getElementById("signup");
        const twoElem = document.getElementById("signModall");
        ref.current = ons;

        oneElem.addEventListener("click", ()=> {
            twoElem.style.display = double("block");
        })
    }, [ons]);
    return UseEffects;
}

Answer 1

[atrevido]

Хуки вообще неприменимы для class components в react. Как написал Антон тут следует сделать нормальный подход средствами реакта. Если очень хочется через родительский компонент управлять элементами дочернего - можно использовать ref через React.createRef() в классах и useRef в FC.

Что делает и зачем UseEffects используется в коде я не понял. Это не компонент реакта, возвращает эта функция саму себя. Это и не high order component и не FC. useEffect должен зависеть от внешних параметров, которые могут поменяться. Если надо его вызвать один раз на рендер компонента, то зависимости [], если каждый раз - вообще не указывать значение.

Сделайте передачу через props делегата на вызов функции родительского компонента и откажитесь от прямой работы с DOM (если есть хотя бы один вариант сделать это средствами реакта)

Не пишите стили напрямую, попробуйте сделать правильный класс с атрибутом {display: block}, например .block и на метод нажатия кнопки добавляйте стиль. Если стиль в другом компоненте - пробросьте через props методы изменения, или используйте контекст, redux и тп

Answer 2

[Антон Неверов]

Что вы сделать то хотите? Почему вы компонентом вызываете функцию из которой возвращается хук useEffect?
Зачем ванильный JS используете в обход React? Используйте стандартные события onClick или Redux/Контекст.

Всё что вам нужно - это адаптировать код:

export function SignUp(props) {
    const handleClick = useCallback(e => alert('clicked!'), []);
    return(       
        <div id="signup" className ="ferSignUp" onClick="handleClick ">
             <h3>Sign up <img src="img\icon-signup.png" alt="signup"></img></h3>  
        </div>
    );
}