0

在我的反应应用程序中,我有组件,我在其中使用Transitionfrom react-spring

import { Transition } from 'react-spring'

export class myComponent {
 state = {
   items: []
 }

 static getDerivedStateFromProps(props, state){
    const newItems = [...props.items]

    if(props.items !== state.items){
      return {items: newItems}
    }
 }

 render() {
  const { items } = this.state

        <Transition
        items={items}
        keys={item => items.id}
        initial={{ opacity: 1, height: 'auto' }}
        from={{ opacity: 0, height: 0 }}
        enter={{ opacity: 1, height: 'auto' }}
        leave={{ opacity: 0, height: 0 }}
      >
        {item => propsAnimations => (
          <section style={propsAnimations}>
            <Item
              key={item.selectionId}
            />
          </section>
        )}
      </Transition>
 }
}

但是当我更新this.state.items这并没有重复动画。当我更新items状态时,我只更改数组中的元素顺序。

4

0 回答 0