css - 改变状态但不改变样式 Reactjs

Question

当我尝试通过更改用户鼠标悬停按钮时的状态来更改此部分的样式时，这很奇怪。 h1 标签的内容已更改，但该部分的样式未更改。有人可以帮我解决这个问题吗？

    export class Jumbotron extends Component {

    constructor (props) {
    super(props)
    this.state = {
      style: {
        backgroundImage: 'none'
      }
    }

    this.handleSubjectMouseOver = this.handleSubjectMouseOver.bind(this)
  }

  handleSubjectMouseOver (bg) {
    console.log(bg)
    this.setState({
      style: {
        backgroundImage: bg
      }
    })
  }

  render () {
    return <section className="jumbotron container" style=
    {this.state.style}>
      <h1>{this.state.style}</h1>
      <div className="jumbotron-content">
        <h2 style={{marginBottom: 3, marginTop: 40}}>Learning is fun with 
        LIVE</h2>
        <div style={{marginLeft: 10}}>Body ........</div>
        <div style={{marginBottom: 20, marginTop: 80}}
             className="subjects-title">TOP CLASSES, TUTORIAL & TIPS TO EXCEL IN:
        </div>
        <div className="subjects" style={{backgroundImage: this.state.background}}>
          <RaisedButton label="MATH" secondary onMouseMove={() => { this.handleSubjectMouseOver(mathBg) }} />
          <RaisedButton label="PHYSICS" secondary onMouseMove={() => { this.handleSubjectMouseOver(physicBg) }} />
          <RaisedButton label="CHEMISTRY" secondary onMouseMove={() => { this.handleSubjectMouseOver(chemistryBg) }} />
          <RaisedButton label="BIOLOGY" secondary onMouseMove={() => { this.handleSubjectMouseOver(biologyBg) }} />
          <RaisedButton label="COMP SCIENCE" secondary
                        onMouseMove={() => { this.handleSubjectMouseOver(computerBg) }} />
        </div>
      </div>
    </section>
  }

Answer 1

使用以下行代替设置背景图片

style={{'backgroundImage': 'url('+this.state.background+')'}}

要阅读更多关于此的详细信息，请访问 here & here .

同时检查 webpack 的 css-loader 问题 here .

希望对您有所帮助!