Agregar una clase al HTML etiqueta con React?

Solución:

TL; DR usar document.body.classList.add y document.body.classList.remove

Tendría dos funciones que alternan una parte del estado para mostrar / ocultar el modal dentro de su componente externo.

Dentro de estas funciones usaría el document.body.classList.add y document.body.classList.remove métodos para manipular la clase de cuerpo dependiendo del estado del modal como se muestra a continuación:

openModal = (event) => {
  document.body.classList.add('modal-open');
  this.setState({ showModal: true });
}
hideModal = (event) => {
  document.body.classList.remove('modal-open');
  this.setState({ showModal: false });
}

Con el nuevo React (16.8) esto se puede resolver con ganchos:

import {useEffect} from 'react';

const addBodyClass = className => document.body.classList.add(className);
const removeBodyClass = className => document.body.classList.remove(className);

export default function useBodyClass(className) {
    useEffect(
        () => {
            // Set up
            className instanceof Array ? className.map(addBodyClass) : addBodyClass(className);

            // Clean up
            return () => {
                className instanceof Array
                    ? className.map(removeBodyClass)
                    : removeBodyClass(className);
            };
        },
        [className]
    );
}

luego, en el componente

export const Sidebar = ({position = 'left', children}) => {
    useBodyClass(`page--sidebar-${position}`);
    return (
        <aside className="...">
            {children}
        </aside>
    );
};

En realidad, no necesita 2 funciones para abrir y cerrar, podría usar document.body.classList.toggle

const [isOpen, setIsOpen] = useState(false)
useEffect(() => {
  document.body.classList.toggle('modal-open', isMobileOpen);
},[isOpen])
    
<button onCLick={()=> setIsOpen(!isOpen)}>Toggle Modal</button>

---

---

Utiliza Nuestro Buscador