更改背景组件 - REACTJS答案

【问题标题】：Changing Background Component - REACTJS更改背景组件 - REACTJS
【发布时间】：2019-03-27 14:31:31
【问题描述】：

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

这是我的 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;
}

Portfolio.js：

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

有什么建议吗？ obs：对不起我的英语不好

【问题讨论】：

请确认您的背景网址一次，即 background: url(../image/teste2.jpg) ，因为您之前的图片有 ./styles/image/teste3.jpg
您确定，包含 .background-portfolio 的 css 文件已加载吗？
这应该可以工作（但这与反应无关）。 codepen.io/lipp/pen/yRxZpX

标签： javascript html css reactjs components

【解决方案1】：

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

HTML

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

CSS

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

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/

【讨论】：