Реакторная пружина однокомпонентного монтажа / демонтажа показывает - PullRequest
Новая
       10

Реакторная пружина однокомпонентного монтажа / демонтажа показывает

0 голосов
/ 09 ноября 2018

Я пытаюсь создать анимацию, когда компонент монтирует / демонтирует с помощью React-spring: 

    import { Transition, animated } from 'react-spring'
    ...

    export class CompName extends PureComponent<CompNamePropsType> {
      static defaultProps = {
        isExpanded: false,
      }

      render() {
        const {
          isExpanded,
          ...props
        } = this.props

    return (
      <section className={styles.block} {...props}>
        <Transition
          from={{ opacity: 0 }}
          enter={{ opacity: 1 }}
          leave={{ opacity: 0 }}>
        {isExpanded && (style => (
           <animated.div style={{ ...style, background: "orange" }}>
             <AnotherComp />
           </animated.div>
        ))}
       </Transition>
      </section>
    )
  }
}

Но это просто не работает, и я получил ошибку children is not a function. Что я сделал не так, и как я могу создать анимацию при монтировании / размонтировании компонента с помощью обертки реагирующей пружины?

1 Ответ

0 голосов
/ 09 ноября 2018

Правильный путь: 

<Transition items={isExpanded} native from enter leave>
  {isExpanded => isExpanded && (props => <animated.div style={props} />)
</Transition>

Предметы в, могут быть одним предметом, как в вашем случае, затем работать против предмета, который выходит. Причиной этого является то, что переход сохранит его, даже когда реальное состояние изменится, он все еще может безопасно перевести элемент в «старое» состояние.

API объясняется здесь: Reaction-spring.io / docs / props / transition

...