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的路由来路由到 localhost：8080：

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

感谢您的期待。

Answer 1

我按照下面给出的帖子：

CSS-Only Technique #1

我用过

对于包含bg图片的网页

<img src={ImgPathVar} alt="bg" class="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>
    );
  }
}

Answer 2

我不了解您的应用程序的更多信息，我首先会问这是否真的应该是同一个React应用程序的一部分 - “管理员”听起来像是一个单独的东西，你不希望普通用户必须下载。< / p>

假设您要保留它，我实际上会将此背景视为登录组件的一部分，例如将<div className="cover" />添加到现有组件中，其样式为：

position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
background: #F00;

根据您处理滚动的方式，您可以将这些样式应用于整个组件，作为容纳所有内容的容器。

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

2 个答案: