web-dev-qa-db-ja.com

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およびReactRouter？ を使用して、各ルートでページの背景色を変更します

javascriptreactjsreact-jsx
41
Giant Elk

Bodyタグが別のReactコンポーネントの一部ではない場合、通常どおり変更するだけです：

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

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
Tiago Gouvêa

追加のクラスをロードまたは追加する最良の方法は、componentDidMount（）にコードを追加することです。

reactおよびmeteorでテスト済み：

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