Reactjs 如何渲染/设置离开阵列的项目的动画

目前，我有一个刮板，它可以刮板空闲消息并将它们存储在某个数据库中

在前端，我每秒钟都在拉一次，看看是否有新消息弹出。然后我把这些信息呈现在屏幕上

如果slack上的任何人回复或表情邮件，则该邮件将从后端删除，从而从前端删除

我现在要做的是，当一个项目被删除时，我想以某种方式为它设置动画

以下是我当前的一些代码：

async componentDidMount() {

        await this.grab_channels()
        await this.grab_slack_user_data()
        await this.grab_items()

        setInterval(() => {
            this.grab_items()
        }, this.state.settings.seconds_per_slack_messages_pull * 1000 )
    }

最后，渲染项目：

this.props.items.map( t => { 
                        return (
                            <Item 
                                key={ t.usr + '_' + t.ts } 
                                task={ t } 
                                user={ this.props.slack_users[ t.usr ] } 
                                settings={ this.props.settings } 
                                now={  this.state.now } 
                                /> 
                        )
                    } )

this.props.items.map（t=>{
返回(
)
} )

我想在

grab_items（）

中进行某种检查，但之后我不知道如何继续。很容易确定哪些应该渲染出来，但问题实际上是这样做的

有没有人有过这样的经验

---

谢谢

使用转换组是实现此目的的一种方法：

看看这个例子：

---

有关函数抓取项中的检查部分

   /* include "clone" so that we don't modify state directly */
    import clone from 'clone'

      grab_items() {
        let url = this.state.settings.api_url + 'channel/' + this.state.selected_channel + '/now'

        return new Promise(resolve => {
          axios.get(url).then(res => {
            /* figure out what items to remove before you set the state */
            let itemsToShow = []
            for (let i = 0; i < this.state.items.length; i++) {
              let ifFound = false
              let t = clone(this.state.items[i])
              for (let j = 0; j < res.data.length; j++) {
                if (t.key === res.data[j].key) {
                  ifFound = true
                }
              }
              /* if ifFound is false, it means it is not in the messages any more. */
              if(!ifFound){
                t.haveAnimation = true
                itemsToShow.push(t)
              }
              itemsToShow = itemsToShow.concat(res.data)
              this.setState(itemsToShow)
            }
          })
        })
      }

/*包括“克隆”，这样我们就不会直接修改状态*/
从“克隆”导入克隆
抓取物品（）{
让url=this.state.settings.api_url+'channel/'+this.state.selected_channel+'/now'
返回新承诺（解决=>{
get（url）。然后（res=>{
/*在设置状态之前，请确定要删除哪些项*/
让itemsToShow=[]
for（设i=0；i

然后，当它每秒重新提取数据时，您将有一个要显示的项目列表。列表中有需要“消失”动画的项目，还有新消息

要使动画正常工作，请在渲染部分中：

  this.props.items.map(t => {
    return (
      <Item
        key={t.usr + '_' + t.ts}
        className={t.haveAnimation ? 'animationCSS' : ''}
        task={t}
        user={this.props.slack_users[t.usr]}
        settings={this.props.settings}
        now={this.state.now}
      />
    )
  }

this.props.items.map（t=>{
返回(
)
}

---

上面的代码应该将css类附加到项目中。你可以在类中放置任何css动画

在我自己做了更多的研究之后，我找到了过渡组，这正是我所需要的。

  this.props.items.map(t => {
    return (
      <Item
        key={t.usr + '_' + t.ts}
        className={t.haveAnimation ? 'animationCSS' : ''}
        task={t}
        user={this.props.slack_users[t.usr]}
        settings={this.props.settings}
        now={this.state.now}
      />
    )
  }