1

アドオンを使用しCSSTransitionGroupて、配列へのアイテムの追加と削除をアニメーション化しています。追加すると、アニメーションは期待どおりに実行されますが、削除すると、アニメーションが始まる前に削除されたアイテムが最後に移動します。私は React にかなり慣れていませんが、React が配列の変更をどのように調整するかについて、内部で何かが起こっていると思いますか?

http://jsfiddle.net/alalonde/0kztn19d

4

1 に答える 1

1

反応のkey詳細のために、削除ステートメントが間違っています。動的コンポーネント（これはあなたが持っているものです）の説明と、「キー」でそれらを使用する方法を参照してください。

修復するにreturnは、子のマッピング内のステートメントを次のように変更します。

return <Item key={item} item={item}/>;

と呼ばれる新しい（純粋な）コンポーネントを作成します<Item>。

var Item = React.createClass({
  render: function() {
    return <div>{this.props.item}</div>;
  }
});

私はあなたのフィドルでこれを試しましたが、うまくいきます。このリンクが更新されたフィドルを提供してくれることを願っています。

ところで：フィドルに沿って、私の変更は迅速で汚い解決策です.reactは、キーが一意であり、リスト内のアイテムのコンテンツに関連していることを期待しています. 私の例は 2 番目の要件 (マッピング インデックスをキーとして使用しないでください) を満たしていますが、最初の要件では失敗します。一意ではない)、失敗します。

于 2016-03-14T17:16:39.600 に答える