javascript - 移除 componentDidMount 上的 backgroundImage

Question

我目前有一个 <Login/>页，和一个 <Dashboard/> .

登录页面背景为#222 , 当您登录时，仪表板的背景为 whitesmoke

我这样做的方式是在 body css 上添加这个:

body {
    background-color: #222222;
}

这在 Dashboard.js 中:

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

到目前为止，这是有效的。但是我现在在登录页面上有一个图像作为我的背景，如下所示:

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

但是我的仪表板继承了背景图片，即使我放了这样的东西也是如此:

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

我该如何解决这个问题？谢谢

Answer 1

为什么不使用类呢？

---

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

此外，您可能希望抽象那些 addClass/removeClass 并使用 emits .