个人处理多个组件

Question

我有一个简单的游戏应用程序，我正在尝试将其放在一起练习：

1. 用户单击切换Button s以进行选择（即选择所有正确的答案）
2. 选择地图被提交给游戏
3. 如果选择映射正确，请增加Timer.timeRemaining到n秒，否则将Timer.timeRemaining减少m秒。

我认为这似乎很容易，但是在步骤1中，当我更改按钮属性时（您可以看到一个映射到每个按钮名称/ID的对象，也许不是这样做的方法吗？）Button的道具，所以我没有重新渲染。

我应该这样做吗？宁愿尝试在不诉诸Redux的情况下尝试进行此操作（如果是一种选择），因为我还没有真正学过的（尽管它正在阅读的书中都出现过，所以如果有必要维护状态整个游戏中的...）。

代码的相关部分：

ButtonProp类：

class ButtonProp {
  constructor(selected = false, style = { backgroundColor: '#1051c5', color: '#fff' }) {
    this.isSelected = selected;
    this.hasStyle = style;
    this.unselectedStyle = {
      backgroundColor: '#1051c5',
      color: '#fff'
    };
    this.selectedStyle = {
      backgroundColor: '#c1ecff',
      color: '#999'
    };
  }
  toggle() {
    [this.isSelected, this.hasStyle] = this.isSelected
      ? [false, this.unselectedStyle]
      : [true, this.selectedStyle];
  }
}

制作实际游戏的类（由单独的类称为TestGame，通过道具，看起来像['A', 'B', 'C', 'D', 'E']）：

class TestGameMaker extends Component {
  constructor(props) {
    super(props);
    let buttonMapArray = [];
    props.choices.map((choice) => {
      buttonMapArray = [...buttonMapArray, [choice, new ButtonProp()]];
    });
    const buttonMap = new Map(buttonMapArray);
    this.interval = 0;
    this.state = {
      buttons: buttonMap,
      timeRemaining: 10
    };
    this.selectHandler = this.selectHandler.bind(this);
  }
  submitHandler(e) {
    // Check if the currentSelection array matches the answer
  }
  selectHandler(e) {
    // change the color/background color of the selected button
    // toggle currentSelection array entry to true/false
    this.state.buttons.get(e.target.id).toggle();
  };
  render() {
    return (
      <div>
        <Timer timerValue={this.state.timeRemaining} />
        {this.props.choices.map(
          choice => (
            <Button
              key={choice.id}
              name={choice}
              style={this.state.buttons.get(choice).hasStyle}
              handler={this.selectHandler}
            />
          )
        )}
        <Submit handler={this.submitHandler} />
      </div>
    );
  }
}
TestGameMaker.propTypes = {
  choices: PropTypes.arrayOf(PropTypes.string).isRequired
};

Answer 1

您与React的工作方式相距甚远。看来您正在尝试密切遵守OOP原则，但是React更像是一个功能性的框架。

toggle方法应该存在于TestGameMaker组件上。它应该使用setState修改该组件的状态。按钮组件应该从TestGameMaker状态拉出其道具。

我建议您浏览一个简单的React ToDo教程，并特别注意组件状态的目的。