web-dev-qa-db-fra.com

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

Créer un modal dans mon projet React nécessitant l'ajout d'une classe au corps lorsque celui-ci est ouvert et son retrait lors de sa fermeture. 

Je pouvais faire cela à l'ancienne méthode jQuery en exécutant du javascript Vanilla qui ajoute/supprime une classe, mais cela ne ressemble pas à la philosophie normale de React. 

Devrais-je plutôt définir l'état de mon composant de niveau supérieur pour indiquer que le modal est ouvert ou fermé? Même si je le faisais, comme il est rendu dans la division de la page, c'est toujours un effet secondaire d'éditer l'élément body. Y at-il un avantage à ce câblage supplémentaire? 

html5reactjsclassname
15
Evans

TL; DR utilisez document.body.classList.add et document.body.classList.remove 

J'aurais deux fonctions qui basculer un morceau d'état pour afficher/masquer le modal dans votre composant externe.

Dans ces fonctions, j'utiliserais les méthodes document.body.classList.add et document.body.classList.remove pour manipuler la classe body en fonction de l'état du modal, 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 });
}
20
Sam Logan

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

Dans ce composant de niveau supérieur:

  1. Ajouter un état booléen (par exemple, modalOpen) pour basculer la classe CSS
  2. Ajoutez des méthodes (par exemple, handleOpenModal & handleCloseModal) pour modifier l’état booléen.
  3. Transmettez les méthodes créées ci-dessus comme accessoires dans votre composant <Modal />
0
JustinToh

ReactJS a un composant officiel React Modal, je voudrais simplement utiliser celui-ci: https://github.com/reactjs/react-modal

0
swyx