Wie kann ich mit React ein seitenspezifisches Vollbild-Hintergrundbild anwenden?

Question

Ich habe eine Komponente Admin-login.jsx und unten ist der Code für das gleiche genannt:

// 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; 

Routen/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'); 
    } 
}; 

ich den Code, dass unsere unwesentlich für diese Frage ausgezogen haben. Ich versuche, die Klasse admin-login-page auf den Textkörper anzuwenden, wenn diese Komponente geladen wird, und dann die Klasse zu entfernen, wenn die Komponente aushängen.

Aber ich sehe ein sehr seltsames Verhalten. Selbst wenn die Klasse beim Aushängen entfernt wird und sich die Route ändert, bleibt das Hintergrundbild auf der Seite.

Ich werde das Bild für mehr Klarheit hinzufügen.

Wenn ich Route zu localhost: 8080/admin-login:

Wenn ich den Weg zur Wurzel URL dh localhost: 8080 durch das Logo auf localhost klicken: 8080/admin-Login verwenden reagieren-Router tag:

Beachten Sie, dass, alles ohne Refresh geschieht. Auch, Ich kann dies tun, indem Sie den Wert der Höhe des Bildschirms und dann als eine Eigenschaft auf eine der Klasse in der Komponente vorhanden, so dass, wenn die Komponente aushängen der Hintergrund verschwindet. Aber ich hätte gerne eine Lösung, bei der ich ein Vollbild-Hintergrundbild mit dem Body-Tag anwenden kann.

Vielen Dank im Voraus.

Answer 1

folgte ich der unten angegebenen Beitrag:

CSS-Only Technique #1

I verwendet

<img src={ImgPathVar} alt="bg" class="bg"> für Seiten mit bg Bilder

und

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

Danach beantragte ich die unten angegebenen 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% */ 
    } 
} 

Snippet meiner eigentlichen Code:

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

Wenn ich nicht mehr über Ihre App weiß, frage ich zuerst, ob dies wirklich Teil der gleichen React-App sein sollte - "admin" klingt wie eine separate Sache, die normale Benutzer nicht herunterladen sollen.

Angenommen, Sie es behalten wollen, würde ich tatsächlich diesen Hintergrund als Teil des Login-Komponente berücksichtigen, wie in Add <div className="cover" /> an die bestehende Komponente gestylt wie:

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

Je nachdem, wie man es zu tun mit Scrollen können Sie diese Stile einfach auf die gesamte Komponente als einen Container anwenden, in dem alles zentriert wird.