Question

我目前有一个仪表板类型的应用程序，可以将消息从多个闲置通道中拉出，并显示这些消息而没有任何回复或表情符号。您可以更改要查看的频道。

当前，父状态看起来像这样：

state = {
        selected_channel: window.localStorage.getItem( 'last-slack-ch' ) || 'ABC123'
        selected_date: new Date(),
        channels: {},
        items: [],
        slack_users: {},
        settings: {
            seconds_per_slack_messages_pull: 1
        },
        atBottom: false
    }

提取消息...或items之后，我将该数组传递到组件ItemsContainer中。

这是ItemsContainer

中的render方法

render() { 

        return (
            <div className="items-container">
                {
                    this.props.items.length > 0 ?
                        <ReactCSSTransitionGroup
                            transitionName='item'
                            transitionEnterTimeout={500}
                            transitionLeaveTimeout={500}>
                        {
                            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 } 
                                    /> 
                                )
                            } )
                        }
                        </ReactCSSTransitionGroup>
                    :
                        <p className='nothing-found'>No items were found in channel: { this.props.selected_channel }</p>
                }

            </div>
        );
    }

我目前面临的问题是某些我不想进行过渡的事件。内容：初始页面加载和切换频道。

我尝试将一些道具传递给ItemsContainer，这些道具将确定向ReactCSSTransitionGroup的过渡名称...但是事情并没有很好地工作。

有人对此有经验吗？

Answer 1

很难从代码中确切地知道如何实现，但是可以在key组件的顶级div中添加ItemsContainer属性。 key属性通常用于标识集合中的子项，但可以在这些情况之外使用。更改键后，React会创建一个新的组件实例，而不是重新渲染现有的（https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key）。

因此，尝试将ItemsContainer重写为：

render () {
  return (
    <div className="items-container" key={this.props.selected_channel}>
      // Transition code that will only apply within the selected channel.
    </div>
  );
}

这应该解决切换通道问题。因此，当ItemsContainer收到新的props.selected_channel值时，您应该避免过渡动画。

在某些事件上禁用React CSS过渡组

1 个答案: