在挂载时给 React 组件动画

Question

我正在尝试使此组件在安装时移入，但得到

Cannot read property 'enter' of undefined

这是一个简化的代码(我已经准备好了所有的CSS类(：

class Example extends React.Component {
state = {
transitionIn: false,
};
componentDidMount = () => {
this.setState({ transitionIn: true })
}
render() {
return (
<CSSTransition
in={this.state.transitionIn}
timeout={1000}
className={'wordTransition'}
>
<div>dksjfnsdkjnfj</div>
</CSSTransition>
);
}
}

https://codesandbox.io/s/rj5046zxoo

Answer 1

我相信您遇到的错误是您在上面提供的 codesandbox.io 链接中解决的错误。我遇到了同样的问题。我没有命名将类名用作各种过渡状态的前缀的 prop，而是使用classNames(复数(，而是使用更熟悉的className(单数(。

重申一下：在<CSSTransition>组件内部，确保您使用的是classNames道具，而不是像在 react 组件的 html 元素中那样className。

我觉得 React Transition Group 选择在他们的组件中使用一个名为classNames的道具是令人困惑的，也许应该重新考虑。