javascript - 如何使用 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;

routes/admin/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 时:

当我通过使用 react-routers 标签单击 localhost:8080/admin-login 上的 Logo 来路由到根 url，即 localhost:8080 时:

请注意，一切都在没有刷新的情况下发生。此外，我可以通过获取屏幕高度的值然后将其作为属性应用到组件中存在的类之一来实现这一点，这样当组件卸载时背景就会消失。但是，我想要一个可以使用 body 标签应用全屏背景图像的解决方案。

感谢期待。

Answer 1

我关注了下面给出的帖子:

CSS-Only Technique #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>
    );
  }
}