如何使用React应用特定于页面的全屏背景图像？

Question

我有一个名为admin-login.jsx的组件,下面是相同的代码:

// AdminLogin Component
class AdminLogin extends Component {

  componentDidMount() {
    let elem = document.querySelector('body');
    addClass(elem, 'admin-login-page');
  }

  componentWillUnmount() {
    let elem = document.querySelector('body');
    removeClass(elem, 'admin-login-page');
  }

  render() {

    return(
      <div className="admin-login">
        <LoginModule
          submit={handleSubmit(this.onLogin.bind(this))}
          email={email} password={password}
          loginFailed={this.state.loginFailed}
          disableSubmit={this.state.isLoading}
        />
      </div>
    );
  }
}

admin.login.scss

@import "styles/site-mixins";

.admin-login-page {
  background: url(../images/admin.login.bg.jpg) no-repeat top center fixed;
  @include prefix(background-size, cover, webkit moz ms);
}

routes.js

import App from 'components/app';
import Admin from './admin/admin';

const rootRoute = {
  'path': '/',
  'component': App,
  'childRoutes': [
    Admin
  ]
};

export default rootRoute;

路线/管理/ admin.js

export default {
  'path': 'admin-login',
  'indexRoute': {
    getComponent(location, cb) {
      require.ensure([], (require) => {
        cb(null, require('components/admin/login/admin-login').default);
      }, 'admin_login');
    }
  },
  getComponent(location, cb) {
    require.ensure([], (require) => {
      cb(null, require('components/admin/admin').default);
    }, 'admin');
  }
};

我已经删除了我们对这个问题不重要的代码.我想要做的是在安装此组件时将类admin-login-page应用于正文,然后在卸载组件时删除该类.

但是,我看到一种非常奇怪的行为.即使在卸载时删除了类并且路径发生了变化,背景图像也会保留在页面上.

我会添加图片以获得更清晰.

当我路由到localhost:8080/admin-login:

当我通过localhost:8080/admin-login使用react-routers标签路由到根网址即localhost:8080:

请注意,一切都没有刷新.此外,我可以通过获取屏幕高度的值然后将其作为属性应用于组件中存在的类之一来执行此操作,以便在组件卸载时背景消失.但是,我想要一个解决方案,我可以使用body标签应用全屏背景图像.

谢谢你的期待.

Answer 1

我按照下面给出的帖子:

仅CSS技术#1

我用了

<img src={ImgPathVar} alt="bg" class="bg"> 用于带有bg图像的页面

和

<div className="bg-color"></div>

之后,我应用了下面给出的css:

// Full page responsive background image
img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;

  /* Set up proportionate scaling */
  width: 100%;
  height: auto;

  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}

// Full page background color
div.admin-bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;

  /* Set up proportionate scaling */
  width: 100%;
  height: auto;

  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  background-color: $admin-bg;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
  img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }

  div.admin-bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}

我的实际代码片段:

class AdminDashboard extends Component {
  render() {
    return (
      <div className="admin-dashboard">
        <div className="admin-bg"></div>
        <AdminHeader />
        <Link to="/staff-login">Staff Login</Link>
        {this.props.children}
      </div>
    );
  }
}



class AdminLogin extends Component {
  render() {
    return (
      <div className="admin-dashboard">
        <img src={ImgVar} className="bg" />
        <AdminHeader />
        <Link to="/staff-login">Staff Login</Link>
        {this.props.children}
      </div>
    );
  }
}