时间戳

首页 > 解决方案 > 更改背景组件 - REACTJS

javascript - 更改背景组件 - REACTJS

问题描述

我正在尝试更改组件的背景，但它不起作用

这是我的 index.css：

body {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      background: url(./styles/image/teste3.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}

该背景完美无缺，但我想在访问另一个组件时更改它

所以我做了一个组件调用 Portfolio，当我访问该组件时，它是为了改变背景，但它不起作用

投资组合 CSS：

.background-portfolio {
  background: url(../image/teste2.jpg) no-repeat center center fixed !important;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  transition: all 0.5s !important;
}

投资组合.js：

componentWillMount(){
    document.body.classList.add("background-portfolio");
  }

有小费吗？obs：对不起我的英语不好

标签： javascripthtmlcssreactjscomponents

解决方案

尝试改用 componentDidMount 并尝试将 .background-portfolio 更改为 body.background-portfolio

HTML

<div id="app"></div>

CSS

body {
  background-color:blue;
}
body.background-portfolio {
  background-color: red;
}

JS

class App extends React.Component {
componentDidMount(){
  document.body.classList.add("background-portfolio");
}
render() {
  return (
    <div>
      Hello
    </div>
  )
 }
}

ReactDOM.render(<App />, document.querySelector("#app"))

http://jsfiddle.net/xn43hpov/

推荐阅读