react-spring 单组分 mount/unmount 显示

Question

我正在尝试在组件 mount/unmount 与 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 包装器在组件 mount/unmount 上创建动画？

Answer 1

正确的方法是：

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

输入的项目，可以像您的情况一样是单个项目，然后针对输出的项目进行处理。原因是转换将保留它，即使实际状态发生变化，它仍然可以安全地将元素转换到 "old" 状态。

这里解释api：react-spring.io/docs/props/transition

react-spring 单组分 mount/unmount 显示

react-spring single-component mount/unmount reveals

jsx

reactjs

react-spring