根據狀態反應TransitionGroup子級

Question

目前，我有許多相同的組件是從地圖中渲染的，如下所示：

{this.state.Tweets.map(t => <Tweet key={t.title} title={t.title} desc={t.desc} />)}

因此，我完成的工作是將整個地圖對象包裝成這樣的過渡形式：

<TransitionGroup> {this.state.Tweets.map(t => <Tweet key={t.title} title={t.title} desc={t.desc} />)} </TransitionGroup>

this.state.tweets使用以下更新：

filterTweets() {
  const t = this.state.tweets;
  const filteredTweets = _.filter(t, tweet => tweet.time.end > this.state.time);
  this.setState({ tweets: filteredTweets });
}

但是，無論出於何種原因更新this.state.Tweets時， <TransitionGroup>中的項目數都不會更新。 我可以使componentWillEnter生命周期掛鈎啟動，但我無法更新其他任何內容。 有任何想法嗎？

我嘗試將this.state.Tweets添加為<TransitionGroup>的道具，但這似乎根本不起作用。

Answer 1

實際上，我錯過了TransitionGroup的關鍵角色：

請注意，您必須在動畫結束后調用提供的回調，否則您的組件將進入但不離開，或者離開但不進入。