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