Remove backgroundImage auf componentDidMount

Question

Ich habe derzeit eine <Login/> Seite und eine <Dashboard/>.

Die Login-Seite hat einen Hintergrund von #222, und wenn Sie das Dashboard anmelden hat einen Hintergrund von whitesmoke

So wie ich tue dies, diese auf dem Körper CSS ist mit:

body { 
    background-color: #222222; 
} 

und dies im Dashboard.js:

componentWillMount() { 
    document.body.style.backgroundColor = "whitesmoke"; 
} 
componentWillUnmount() { 
    document.body.style.backgroundColor = null; 
} 

Bisher wurde dies funktioniert. Aber ich habe jetzt ein Bild als meinen Hintergrund auf der Login-Seite, wie hier zu sehen:

body { 
    background-color: #222222; 
    background: url('../../public/img/bg.png'); 
    background-repeat: repeat; 
} 

aber mein Armaturenbrett erbt das Hintergrundbild, auch wenn ich etwas so:

componentWillMount() { 
    document.body.style.backgroundImage = null; 
    document.body.style.backgroundColor = "whitesmoke"; 
} 
componentWillUnmount() { 
    document.body.style.backgroundColor = null; 
} 

Wie Ich komme damit klar? Danke

Answer 1

Warum nicht stattdessen Klassen verwenden?

---

componentWillMount() { 
    $('body').addClass('has-background'); 
} 
componentWillUnmount() { 
    $('body').removeClass('has-background'); 
} 

Auch können Sie abstrahieren diejenigen addClass/removeClass und emits verwenden.