react spring单组件装载/卸载显示

Question

当使用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包装器在组件装载/卸载时创建动画？

Answer 1

正确的方法是：

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

中的项目可以是单个项目，就像在您的情况下一样，然后针对出现的项目进行处理。原因是转换将保留它，即使当实际状态发生变化时，它仍然可以安全地将元素转换到"0"上；旧的"；状态

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