在某些事件上禁用反应 css 过渡组

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() { 

        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 的transitionName...但事情并没有真正发挥作用。

有人有这方面的经验吗？

Answer 1

很难从您的代码中准确判断出您将如何实现它，但您可以在您的ItemsContainer 组件中将key 属性添加到顶级div。 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 值时，你应该避免过渡动画。