尝试通过更新 Reactjs 中的状态来更改背景

Question

所以我正在编写一个包含多个游戏的应用程序。 我希望用户能够单击一个按钮并且游戏出现在屏幕上，并且背景改变颜色。 我想控制这个使用状态，以便整个应用程序的背景发生变化，而不仅仅是游戏组件。

使用我现在的代码，游戏结束时状态会发生变化，但页面不会更新。有什么建议吗？

这就是我的状态

state = {
  madLibsOut: false,
  ticTacOut: false,
  pigLatinOut: false,
  background: "green",
}

这是我试图改变它的一个例子。状态确实发生了变化，游戏出现在屏幕上，但背景颜色没有更新。

handleClickTicTacToe = () => {
  const out = this.state.ticTacOut
  const newColor = 'red'
  this.setState({ ticTacOut: true, background: newColor })
}

以防万一它有用，这是我设置样式的方式：

appStyle={
  backgroundColor: this.state.background,
  height: "100vh",
  width: "100%",
}

render() {
  return (
    <div className="App" style={this.appStyle}>

谢谢！

Answer 1

您的问题是您将状态设置为 类变量，它会被实例化一次，并且值将永远改变。

假设您启用了 ES6。你应该做一些类似于@Allessandro Messori 所说的事情。 但在他的解决方案中，修改对象的属性并设置状态并不好。

在设置状态时，您通常应该创建一个新对象来设置状态。在这种情况下，您的样式对象应该是一个新对象。

state = {
  madLibsOut: false,
  ticTacOut: false,
  pigLatinOut: false,
  appStyle: {
    backgroundColor: "green",
    height: "100vh",
    width: "100%",
  } 
}


handleClickTicTacToe = () => {
  const out = this.state.ticTacOut
  // Use Object.assign(this.state.appStyle, { backgroundColor: 'red' }); if no ES6 enabled
  const newStyle = { ...this.state.appStyle, backgroundColor: 'red' }; 
  this.setState({ ticTacOut: true, appStyle: newStyle })
}

render() {
  return (
    <div className="App" style={this.state.appStyle}>

另一种选择是创建一个函数来返回您的样式，该样式将始终根据您的状态进行更新。假设您是原始代码，您可以将代码更新为此。

getAppStyle = () => {
  return {
    backgroundColor: this.state.background,
    height: "100vh",
    width: "100%",
  };
}

render() {
  const style = this.getAppStyle();
  return (
    <div className="App" style={style}>

Answer 2

将 appStyle 设为根据您的状态返回样式对象的函数。

appStyle = () => {
    return {
        backgroundColor:this.state.backgroundColor
    }
}

Answer 3

您应该在组件状态中取出所有 appStyle 对象。

这样的事情应该可以工作：

  state = {
     madLibsOut: false,
     ticTacOut: false,
     pigLatinOut: false,
     appStyle:{
     backgroundColor: "green",
     height: "100vh",
     width: "100%",
    }
 }


  handleClickTicTacToe = () => {
    const out = this.state.ticTacOut
    let appStyle = this.state.appStyle
    appStyle.backgroundColor = 'red'
    this.setState({ticTacOut: true, appStyle:appStyle})
 }

  render() {
   return (
      <div className="App" style={this.state.appStyle}>