reactjs - 根据状态反应 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 的一个关键角色：

请注意，您必须在动画结束后调用提供的回调，否则您的组件将进入但不离开，或者离开但不进入。