Question

我有一个组件，让我们说它看起来像这样：

return(
    <div id="container"></div>
)

从一开始它的背景图片已经设置好了，比如说

#container{
background-image: url('./assets/container.jpg');}

现在我想在容器div中添加另一个元素，它将具有onClick事件触发功能，这将执行其他操作+更改父级的背景图像。虚拟代码将是：

  handleOnClick(){
     doOtherStuff();
     document.getElementById('container').style.backgroundImage  = "url('./assets/container2.jpg')"}

    return(
    <div id="container">
        <div onClick={()=> handleOnClick()}
    </div>
)

问题是：

它不起作用，它将背景更改为空白屏幕，

离开组件并返回组件后，它将恢复到旧的背景。如果没有与州挂钩的背景，有没有办法避免这种情况？我已经有很多东西存在，如果我开始添加更多样式，它将很快变得混乱。

Answer 1

通过让您的孩子能够改变父母的状态并在那里保持这种逻辑，这是可行的。此外，使用this.setState控制背景移动要好得多。只需使它成为一个控制使用哪个CSS id的布尔值。

class Parent extends Component {
  constructor() {
    super()
    this.state = {
      defaultBackground: true
    }
  }

  toggleChildBackground() {
    const newBackground = !this.state.defaultBackground
    this.setState({defaultBackground: newBackground})
  }
  render() {
    return (
      <div>
        <Child
          defaultBackground={this.state.defaultBackground}
          toggleChildBackground={this.toggleChildBackground.bind(this)}
          />
      </div>
    )
  }
}

class Child extends Component {
  handleClick() {
    this.props.toggleChildBackground()
  }

  render() {
    return (
      <div id={this.props.defaultBackground ? 'id1' : 'id2'}>
        <button onClick={this.handleClick.bind(this)}>
          change background
        </button>
      </div>
    )
  }
}

在ReactJS

1 个答案: