web-dev-qa-db-fra.com

Essayer d'utiliser React.DOM pour définir les styles de corps

Comment puis-je utiliser React.DOM pour changer les styles sur HTML body?

J'ai essayé ce code et ça ne marche pas:

var MyView = React.createClass({
  render: function() {
    return (
      <div>
        React.DOM.body.style.backgroundColor = "green";
        Stuff goes here.
      </div>
    );
  }
});

Si vous l'exécutez à partir de la console des navigateurs, cela fonctionne (mais j'ai besoin qu'il fonctionne en code ReactJS): document.body.style.backgroundColor = "green";

Voir également cette question pour une solution similaire mais différente: Changer la couleur d'arrière-plan de la page avec chaque route en utilisant ReactJS et React Router?

javascriptreactjsreact-jsx
41
Giant Elk

En supposant que votre balise body ne fait pas partie d'un autre composant React, modifiez-le comme d'habitude:

document.body.style.backgroundColor = "green";
//elsewhere..
return (
  <div>
    Stuff goes here.
  </div>
);

Il est recommandé de le mettre à la méthode componentWillMount et de l'annuler à componentWillUnmount:

componentWillMount: function(){
    document.body.style.backgroundColor = "green";
}

componentWillUnmount: function(){
    document.body.style.backgroundColor = null;
}
71
yarden

Une bonne solution pour charger plusieurs attributs d'une classe js dans le corps du document peut être:

componentWillMount: function(){
    for(i in styles.body){
        document.body.style[i] = styles.body[i];
    }
},
componentWillUnmount: function(){
    for(i in styles.body){
        document.body.style[i] = null;
    }
},

Et après avoir écrit votre style de corps aussi longtemps que vous le souhaitez:

var styles = {
    body: {
        fontFamily: 'roboto',
        fontSize: 13,
        lineHeight: 1.4,
        color: '#5e5e5e',
        backgroundColor: '#edecec',
        overflow: 'auto'
    }
}
3
Tiago Gouvêa

La meilleure façon de charger ou d'ajouter des classes supplémentaires est d'ajouter le code dans componentDidMount ().

Testé avec réagit et météore :

componentDidMount() {
    var orig = document.body.className;
    console.log(orig);  //Just in-case to check if your code is working or not
    document.body.className = orig + (orig ? ' ' : '') + 'gray-bg'; //Here gray-by is the bg color which I have set
}
componentWillUnmount() {
    document.body.className = orig ;
}
2
illusionx