Однокомпонентное крепление/размонтирование react-spring раскрывает

я пытаюсь создать анимацию при монтировании/размонтировании компонента с помощью 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. Что я сделал не так, и как я могу создать анимацию при монтировании/размонтировании компонента с помощью оболочки react-spring?


reactjs jsx react-spring
person Vladimir Humeniuk    schedule 09.11.2018    source источник
comment
Если isExpanded является ложным, он возвращается как реквизит children компоненту Transition, который, кажется, ожидает реквизита рендеринга, который вы правильно возвращаете в случае, когда isExpanded является правдивым. Вы можете реорганизовать это, используя тернарный оператор и возвращая какую-то функцию noop, когда isExpanded ложно.   -  person adz5A    schedule 09.11.2018
comment
@adz5A, когда isExpanded имеет значение «true», ошибка «TypeError: child is not a function», а если «false» — «TypeError: _children is not a function»   -  person Vladimir Humeniuk    schedule 09.11.2018
comment
Это связано с тем, что подпись для children в вашем фрагменте неверна. Это функция, которая возвращает функцию: item => props => reactElement. См. react-spring.surge.sh/transition . В вашем примере отсутствуют реквизиты items и правильная подпись для реквизитов children.   -  person adz5A    schedule 09.11.2018

Ответы (1)


arrow_upward
4
arrow_downward

Правильный способ:

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

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

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

person hpalu    schedule 09.11.2018