Ajouter une classe à la balise HTML <body> avec React ?

Question

Ajouter une classe à la balise HTML <body> avec React ?

Demandé el 8 de Décembre, 2017: Quand la question a-t-elle été
16945 affichage: Nombre de visites la question a
4 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Je crée une modale dans mon projet React qui nécessite qu'une classe soit ajoutée au corps lorsque la modale est ouverte et supprimée lorsqu'elle est fermée.

Je pourrais le faire à l'ancienne, à la manière de jQuery, en exécutant du javascript vanille qui ajoute/supprime une classe, mais cela ne ressemble pas à la philosophie normale de React.

Dois-je plutôt définir setState sur mon composant de niveau supérieur pour indiquer si la fenêtre modale est ouverte ou fermée ? Même si je faisais cela, comme c'est rendu dans la div sur la page, c'est toujours un effet de bord pour éditer l'élément body donc il y a un avantage pour ce câblage supplémentaire ?

Demandé el 8 de Décembre, 2017 par jdln

Answer 1

4 Réponses

Answer 2

31voto

Sam Logan Points 685

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

J'aurais deux fonctions qui font basculer un élément d'état pour afficher/masquer la fenêtre modale dans votre composant externe.

À l'intérieur de ces fonctions, j'utiliserais la fonction document.body.classList.add y document.body.classList.remove pour manipuler le corps de la classe en fonction de l'état de la fenêtre modale, comme ci-dessous :

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

Répondu el 8 de Décembre, 2017 par Sam Logan (685 Points )

Answer 3

8voto

Lukas Kral Points 427

Avec la nouvelle version de React (16.8), ce problème peut être résolu avec crochets :

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]
    );
}

puis, dans la composante

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

Répondu el 5 de Avril, 2019 par Lukas Kral (427 Points )

Answer 4

0voto

JustinToh Points 1

Comme @brian l'a mentionné, essayez d'avoir un composant conteneur de haut niveau qui entoure vos autres composants. (en supposant que vous n'utilisez pas redux dans votre application)

Dans ce composant de premier niveau :

Ajouter un état booléen (ex. modalOpen ) pour faire basculer la classe CSS
Ajouter des méthodes (ex. handleOpenModal & handleCloseModal ) pour modifier l'état booléen.
Passez les méthodes créées ci-dessus en tant qu'accessoires dans votre <Modal /> composante

Répondu el 8 de Décembre, 2017 par JustinToh (1 Points )

Answer 5

-3voto

swyx Points 88

ReactJS dispose d'un composant React Modal officiel, je l'utiliserais donc : https://github.com/reactjs/react-modal

Répondu el 8 de Décembre, 2017 par swyx (88 Points )

Ajouter une classe à la balise HTML <body> avec React ?

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Ajouter une classe à la balise HTML <body> avec React ?

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: