Question

我有一个简单的游戏应用程序，我试图将它组合在一起作为练习：

用户点击切换Button以供选择（即选择所有正确答案）
选择地图会提交给游戏
如果选择地图正确，则增加Timer.timeRemaining 按N秒，否则将Timer.timeRemaining减少M秒。

我认为这看起来很容易，但是在第1步中我更改了按钮属性（你可以看到一个对象映射到每个按钮的名称/ id，也许不是这样做的？）它不会更新Button的道具，所以我没有得到重新渲染。

我应该采用标准方式吗？我宁愿尝试在没有使用Redux的情况下在React中进行操作（如果这是一个选项），因为我还没有真正学会它（虽然它正在书中出现我读完，所以如果那个＆＃39;必须保持整个游戏的状态......）。

代码的相关部分：

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

你离反应的意义还很远。看起来您正在尝试严格遵循OOP原则，但React更像是一个功能框架。

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

我建议您阅读一个简单的反应ToDo教程，并特别注意组件状态的目的。

单个处理多个组件

1 个答案: