javascript - 尝试通过更新 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}>