javascript - 单独处理多个组件

Question

我有一个简单的游戏应用程序，我正在尝试将其组合在一起作为练习:

1. 用户点击切换按钮进行选择(即选择所有正确答案)
2. 选择 map 提交给游戏
3. 如果选择 map 正确增加Timer.timeRemaining减少 N 秒，否则将 Timer.timeRemaining 减少 M 秒。

我认为这看起来很简单，但是在第 1 步中，当我更改按钮属性时(您可以看到一个对象映射到每个按钮名称/id，也许不是这样做的方法？)它不会更新Button 的 Prop ，所以我不会重新渲染。

是否有一种标准方法可以让我执行此操作？更喜欢尝试在不求助于 Redux 的情况下在 React 中执行此操作(如果这是一个选项)，因为我还没有真正学会它(尽管它出现在我正在阅读的书中，所以如果有必要保持状态整个游戏在这里......)。

相关部分代码:

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 的单独类调用，它传递 Prop ，看起来像 ['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 状态中提取它的 Prop 。

我建议您阅读简单的 React ToDo 教程之一，并特别注意组件状态的用途。