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的关键角色：

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

根据状态反应TransitionGroup子级

1 个答案: