4

使用 ReactJS 和 React Router 去新路由时如何更改浏览器的背景颜色？请参阅下面的编辑，了解我在此过程中发现的想法：

我可以<div>在每个页面视图中使用它，但我需要它在完整背景上工作，以便完整浏览器窗口显示背景。

我在玩 jQuery，但想知道这是否是解决这个问题的正确方法？我也在尝试使用React.DOM.body，但没有得到它的工作：

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

编辑 2： 这是另一种方式，我更喜欢这种方式，它需要更少的 CSS 行并且在 ReactJS 组件中更明确。我在 DIV 上设置了这个 CSS：

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

1 回答 1

2

确保 React 渲染的根组件React.renderComponent(<Root>, ...)覆盖全屏。现在只需Root#render()像这样管理函数中的状态：

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必须覆盖整个屏幕。

于 2014-08-24T16:54:52.127 回答