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}>