Попытка использовать React.DOM для установки стилей тела

Как я могу использовать React.DOM для изменения стилей в HTML body?

Я пробовал этот код, и он не работает:

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

Если вы выполните это с консоли браузеров, она работает (но мне нужно, чтобы она работала в коде ReactJS): document.body.style.backgroundColor = "green";

Также см. этот вопрос для аналогичного, но другого решения: Изменить цвет фона страницы с каждым маршрутом с помощью ReactJS и React Router?

Ответ 1

Предполагая, что ваш тег тела не является частью другого реагирующего копонента, просто измените его как обычно -

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

рекомендуется поместить его в функцию componentWillMount и отменить его на componentWillUnmount:

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

Ответ 2

Хорошим решением для загрузки нескольких атрибутов из класса js в тело документа может быть:

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;
    }
},

И после того, как вы напишете свой стиль тела, если хотите:

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

Ответ 3

Лучший способ загрузить или добавить дополнительные классы - это добавить код в componentDidMount().

Протестировано с помощью реакции и метеора:

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