使用ReactJS和React Router更改每个路由的页面背景颜色？ [英] Change page background color with each route using ReactJS and React Router?

问题描述

当使用ReactJS和React Router时，如何更改浏览器的背景颜色？看到我的编辑下面的想法我想出的方式：

How can I change the browsers background color when going to a new route, using ReactJS and React Router? See my EDIT's below for ideas I figured out along the way:

我可以得到这个工作在< div> 在每个页面视图，但我需要它工作在完整的背景，所以完整的浏览器窗口显示背景。

I can get this working on the <div> in each page view, but I need it working on the full background so the full browser window shows the background.

我使用jQuery，但想知道这是否正确的方法来解决这个问题？我也试图使用 React.DOM.body ，但不能正常工作：

I playing with jQuery, but wondering if that's even the right way to solve this? I'm also trying to use React.DOM.body, but not getting it working:

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

编辑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组件。我在DIV上设置这个CSS：

EDIT 2: Here's another way, that I like this better, it requires fewer lines of CSS and is more explicit in the ReactJS component. I set this CSS on a 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组件中使用：

And use this in my ReactJS component:

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

推荐答案

确保React使用 React.renderComponent（< Root> ...）覆盖全屏。现在简单地管理 Root＃render（）函数中的状态，如下所示：

Make sure that the root component that React renders with React.renderComponent(<Root>, ...) covers the full screen. Now simply manage the state in the Root#render() function like this:

getInitialState: function () {
  return { color: "white" };
},

changeColor: function () {
  this.setState({ color: "black" });
},

render: function () {
  var style = { backgroundColor: this.state.color };

  return (
    <div id="fullscreen" style={style}>
       <a onClick={this.changeColor}>change</a>
    </div>
  );
}

注意根组件 div＃fullscreen ，必须覆盖整个屏幕。

Note that the root component, div#fullscreen, must cover the full screen.

这篇关于使用ReactJS和React Router更改每个路由的页面背景颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！