jquery - ReactJSとReact Routerを使用して各ルートでページの背景色を変更しますか?

Question

ReactJS と React Router を使用して、新しいルートに移動するときにブラウザの背景色を変更するにはどうすればよいですか? 途中で見つけたアイデアについては、以下の編集を参照してください。

各ページビューでこれを機能させることができますが<div>、ブラウザウィンドウ全体に背景が表示されるように、完全な背景で機能させる必要があります。

私はjQueryで遊んでいますが、それがこれを解決する正しい方法であるかどうか疑問に思っていますか? 私も を使用しようとしていますReact.DOM.bodyが、機能していません:

  render: function() {
    return (
      <div>
        React.DOM.body( {style: background-color: "green"} )
        <MyHeader />
          <this.props.activeRouteHandler/>
      </div>
    );
  }

EDIT 1: これでうまくいきましたが...つまり、背景を変えたいページごとにこのCSSクラスを複製する必要があります。使用するには、各リターンを次のようにラップします: <div className="my-signup-bkg">:

.my-signup-bkg {
    /*To support older browsers*/
    height: 100%;
    width: 100%;

    /* Set the height to match that of the viewport. */
    height: 100vh;

    /* Set the width to match that of the viewport. */
    width: 100vw;

    background-image: url("../images/mod-yellow-bkg.jpg");
    background-repeat: no-repeat;
    background-size: 100%; 
}

EDIT 2: これは別の方法です。私はこれが好きです.CSSの行数が少なくて済み、ReactJSコンポーネントでより明示的です. この CSS を DIV に設定します。

.my-page-text {
    /*height: inherit;*/
    padding: 8% 5% 5% 3%;
    /*top: 55px;*/

    /*To support older browsers*/
    height: 100%;
    width: 100%;

    /* Set the height to match that of the viewport. */
    height: 100vh;

    /* Set the width to match that of the viewport. */
    width: 100vw;

    background-repeat: no-repeat;
    background-size: 100%; 
}

これを ReactJS コンポーネントで使用します。

var MyLoginView = React.createClass({
  render: function() {
    var style = { backgroundImage: 'url("static/images/mod-yellow-bkg.jpg")' };

    return (
      <div className="my-page-text" style={style}>
          Do something.
      </div>
    );
  }
});