12

私は小さな例をやって Facebook React を学んでいます。バインディングに関する私の知識thisが大丈夫かどうかを確認することにしたのでReact.class、変更可能な状態が親にあり、中間のみがコールバックを子に渡して操作する 3 つを作成しました。

基本構造:

- MainFrame (states here)
  - FriendBox (only pass the callbacks for change states to Friend)
    -Friend

私が使用できるよりも注意してくださいtransferThisProp。実際には、これを「手動で」作成することを好みました。

FriendBox render には以下が含まれます:

var allFriends = this.props.friends.map((function (f) {
  return(
    <Friend key = {f.id}
            name = {f.name}
            select = {this.props.select}
    />
  )
}).bind(this))

Friend render には以下が含まれます:

return(
  <div className="friend">
    {this.props.name}
    <a href="" onClick={this.props.select(this.props.key)}>
      select
    </a>
  </div>
)

コードを実行すると、次のメッセージが表示されます。

MainFrame.sendToFriendH:
  Invariant Violation: receiveComponent(...):
  Can only update a mounted component. react.js:7276
Uncaught Error: Invariant Violation:
  receiveComponent(...): Can only update a mounted component.

興味深い点は、chrome の react 拡張機能を使用すると、仮想DOMが適切でバインディングが適切であることを確認できることです。Friend最初の要素の子コンポーネントが言うことを除いて、すべてがうまく見えます_lifeCycleState: "UNMOUNTED"

これは、一番下の子がレンダリングされずにマウントされていないという間違いをしているよりも考えさせられました。すべてのコードが失敗しますが、正確な理由はわかりません。要素が自動的にマウントされない理由と、それを修正するにはどうすればよいですか?

完全なコード: http://jsfiddle.net/RvjeQ/

4

2 に答える 2

19

あなたが書くとき

onClick={this.props.select(this.props.key)}

this.props.selectハンドラーをすぐに呼び出し、その結果を onClick ハンドラーとして設定しています。代わりに、矢印関数を使用して実行できる部分的なアプリケーションを実行したいと思います。

onClick={(e) => this.props.select.bind(this.props.key, e)}

イベント引数を気にしない場合は、スキップできます。

.bind()次のように使用することもできます。

onClick={this.props.select.bind(null, this.props.key)}
于 2014-02-04T18:29:34.827 に答える
3

それだけの価値があるので、あなたはする必要はありません

this.props.friends.map((function(){ ... }).bind(this));

Array.prototype.mapの 2 番目の引数を使用すると、コールバック関数のコンテキストを設定できます。代わりにこれを使用してください

this.props.friends.map(function(f){ ... }, this);

レキシカルスコープを持つアロー関数を使用することもできます

this.props.friends.map(f =>
  <Friend key = {f.id}
          name = {f.name}
          select = {this.props.select}
  />
)

また、複雑な小道具を扱うときは、次のようなことができます

var props = {
  key:    f.id,
  name:   f.name,
  select: this.props.select
};

<Friend {...props} />
于 2014-12-09T05:21:55.593 に答える