javascript-听模型更改的惯用方式

2019-10-30 02:36:24 阅读：146 来源： 互联网

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

现在一切正常,我喜欢董事会成员及其观点之间的关注分离.但是,我让我的Board类将其更改传达给视图的方式很不寻常,并且我认为它与其他React代码不一致.基本上,我滥用jQuery’s event system来允许我触发任意事件,例如[“ update”,“ atari”,“ suicide”].在此方案中,组件具有一个调用Board.play的onClick侦听器,该事件会在Board实例上触发多个事件的0.组件侦听“更新”事件,并调用this.setState,这将迫使它重新渲染(),从而将视图置于正确描述游戏的状态. AlertView侦听同一板实例上的“ atari”和“自杀”事件,并类似地调用this.setState,这将触发另一个render().

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

所有代码都可用here,您可以使用应用程序here玩.

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

解决方法:

我不确定这是否是惯用的React,但是从React教程中,onSubmit处理程序作为道具从父级传递给子级.

在您的情况下,这意味着要将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);
  },
})

标签：reactjs,javascript
来源： https://codeday.me/bug/20191030/1964741.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript-听模型更改的惯用方式