Question

我在 react / redux 上聊天。在页面上，我从 redux 数组中获得所有对话框。然后我为每个按钮绘制一个打开按钮。我需要添加动画以打开每个对话框。为此，我在减速器中打开对话框，添加字段 animate = true;

渲染页面时，我检查此字段是否为true，然后将 dialog_animate 类添加到元素

这是组件代码：

</div>

css：

class PageDialogs extends Component {
   sortDialogs(dialogs){
      return dialogs.sort(function(a, b){
         if (a.openedAt < b.openedAt) {
            return -1;
         }
         else if (a.openedAt > b.openedAt) {
            return 1;
         }
         else {
            return 0;
         }
      });
   }
   showDialogs(){
      return this.props.dialogs.map(function(dialog, key){
         if (dialog.active) {
            return (
               <div key={key} className={dialog.animate ? 'dialog_animate' : ''} >
                  <Dialog  dialog={dialog} />
               </div>
            );
         }
      })
   }
   render() {
      if (typeof this.props.dialogs !== 'undefined') {
         return (
            <div>
               <div className='page-dialogs'>
                  {this.showDialogs()}
               </div>
            </div>
         );
      }
      else {
         return (
            <div>
               <Preloader />
            </div>
         )
      }
   }
}

以这种形式，动画起作用。但我需要 this.props.dialogs 开始排序。如果将 this.props.dialogs 替换为 this.sortDialogs（this.props.dialogs），则问题开始。然后动画仅开始一次。更确切地说，仅针对第一个对象。如果我在5秒钟内持续播放动画，则会打开一些聊天记录，则动画首先出现，最后一个动画结束，然后不再显示。

我将立即说一下，已正确添加了聊天的 dialog_animate 类，已添加的公开类以及所有其余的类。

告诉我原因是什么，如何解决？

谢谢。

Answer 1

我不确定我是否理解正确。但是，5s是很长的动画。特别是当React组件每次收到新的道具时都重新渲染时。

我会为单个对话框适当地制作一个组件，并且（如果可能的话）将动画保留在其中。

否则，您的代码结构可能会有所不同。

export default class PageDialogs extends React.PureComponent {
    sortDialogs = (dialogs) => {
        return dialogs.sort((a, b) => {
            if (a.openedAt < b.openedAt) {
                return -1;
            } else if (a.openedAt > b.openedAt) {
                return 1;
            } else {
                return 0;
            }
        });
    }
    showDialogs = (sortedDialogs) => {
        return sortedDialogs.map((dialog, key) => {
            if (dialog.active) {
                return (
                    <div key={key} className={dialog.animate ? 'dialog_animate' : ''} >
                        <Dialog dialog={dialog} />
                    </div>
                );
            }
        });
    }
    render() {
        const { dialogs } = this.props;
        if (!dialogs) {
            return null;
        }
        // consider sorting on a higher level
        const sortedDialogs = this.sortDialogs(dialogs);
        // It would be better if this was it's own component.
        const displayedDialogs = this.showDialogs(sortedDialogs);
        return (
            <div>
                <div className="page-dialogs">
                    {displayedDialogs}
                </div>
            </div>
        );

        // etc...
    }

}

为什么动画不起作用？

1 个答案: