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 )
    }

grab_items() {

        let url = this.state.settings.api_url + 'channel/' + this.state.selected_channel + '/now'

        return new Promise( resolve => {
            axios.get( url )
                .then( res => {
                    this.setState( { items: res.data } )
                    resolve()
                } )
        })

    }

最后，项目被渲染：

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 } 
                                /> 
                        )
                    } )

我正在考虑在内部进行某种检查，grab_items()但在那之后我不知道如何继续。很容易确定应该渲染出哪些，但问题实际上是这样做的。

任何人都有构建这样的东西的经验吗？

谢谢！

标签： reactjs

reactjs - 如何渲染/动画出离开数组的项目

问题描述

解决方案

推荐阅读