javascript - 听取模型变化的惯用方式

Question

我是第一次玩 React，我觉得我真的很喜欢它。我已经实现了(大部分)棋盘游戏 Go到目前为止，我遇到了一些奇怪的事情，我不知道如何以惯用的 React 方式处理。基本上，我有一个模型——棋盘游戏——作为它自己的类实现 Board .它仅公开其构造函数和方法 play(i,j) 和 pass。它处理所有游戏逻辑并适本地更新自己的内部状态。它没有引用与 View /组件相关的任何内容。我有一个名为 BoardView 的 React 组件它维护对 Board 实例的引用。我还有一个名为 AlertView 的组件，它会在适当的时候显示有关游戏状态(非法移动等)的消息。

现在一切正常，我喜欢 Board 类及其 View 之间的关注点分离。但是，我让我的 Board 类将其更改传达给 View 的方式很不寻常，我觉得它与其他 React 代码不一致。基本上，我滥用jQuery's event system允许我触发任意事件，例如 ["update", "atari", "suicide"]。在此方案中，组件有一个调用 Board.play 的 onClick 监听器，它会在 Board 实例上触发 0 到许多事件。 Component 监听 "update" 事件，并调用 this.setState，这将强制它重新 render()，将查看正确描述游戏的状态。 AlertView 监听同一面板实例上的 "atari" 和 "suicide" 事件并类似地调用 this.setState，它会触发另一个 render()。

我应该删除 jQuery 事件吗？如果是这样，最好的方法是什么？

所有代码都可用here你可以玩这个应用here .

编辑: 为了后代的缘故，这个问题是在提交时提出的 3f600c .

Answer 1

我不确定这是否是惯用的 React，但根据 React 教程，onSubmit 处理程序作为 props 从父级传递给子级。

在您的情况下，这意味着将 onPlay 处理程序从 BoardView 传递到 BoardIntersection，如下所示:

var BoardView = React.createClass({
  getInitialState: function() {
    return {"board": this.props.board}
  },
  playHandler: function(i, j) {
    this.props.board.play(i, j)
  },
  render: function() {
    ...
    intersections.push(BoardIntersection({
      color: this.state.board.board[i][j],
      row: i,
      col: j,
      onPlay: this.playHandler
    }));
    ...
  }
})

和BoardIntersection 将根据需要调用onPlay:

var BoardIntersection = React.createClass({
  handleClick: function() {
    this.props.onPlay(this.props.row, this.props.col);
  },
})