Можно ли использовать методы для работы с DOM в React?

Question

Можно ли использовать методы для работы с DOM в React?

Рейтинг: 0Ответов: 0Опубликовано: 29.03.2023

возможно банальный вопрос, но чёткого ответа на него я так и не нашёл. Могу ли я использовать методы для работы с DOM (конкретно методы для работы с classList) внутри React? Просто я слышал, что это плохо и для работы с DOM нужно использовать ссылки. Тем не менее, читая доку я понял, что ссылки используются например для фокуса на элемент, но про прямую работу с DOM элементом, например установка атрибута или удаление класса, я не нашёл. Вот пример моего кода.

export default function OperationWinow({isActive}) {
    const modalWindow = useRef();
    const deleteModalClass = () => modalWindow.current.classList.remove("active");
  return (
    
    <div ref={modalWindow} className={isActive ? "modal active" : "modal" } id="modal-id">
        <a href="#close" className="modal-overlay" aria-label="Close"
            onClick={() => deleteModalClass()}
        ></a>
        <div className="modal-container">
            <div className="modal-body">
                <div className="form-group">
                    <label className="form-label" htmlFor="input-example-1">Name</label>
                    <input className="form-input" type="text" id="input-example-1" placeholder="Name"/>
                </div>
                <div className="form-group">
                    <label className="form-label" htmlFor="input-example-1">Name</label>
                    <input className="form-input" type="text" id="input-example-1" placeholder="Name"/>
                </div>
            </div>
        </div>
    </div>
    
  )
}

Это обычное модальное окно, которое должно закрываться при нажатии на overlay ссылку. Можно ли таким образом удалять класс, как в строке функции deleteModalClass? Заранее спасибо за ответ

reactjs dom

Источник: Stack Overflow на русском

Можно ли использовать методы для работы с DOM в React?

Ответы