反应转换组 V2 跳过进入/退出状态

Question

我正在尝试了解 React Transition Group V2

我使用 create-react-app 和文档中的示例构建了一个演示，但它跳过了进入/退出状态，并且没有触发转换。

到目前为止，我有....

尝试内联(如文档中所示(并使用类名，但结果相同。 添加和删除浏览器特定的 CSS 摆弄了所有的道具，运气不佳(尽管出现的道具确实触发了"进入"并运行过渡(

以下是文档的链接：https://reactcommunity.org/react-transition-group/

这就是我所拥有的。 (我知道 V2 是相当新的，所以任何帮助将不胜感激。

import React, { Component } from 'react';
import Transition from 'react-transition-group/Transition'
class App extends Component {
state = { show: false }
handleClick = e => {
this.setState({show: !this.state.show})
}
render() {
const duration = 300;
const defaultStyle = {
transition: `opacity ${duration}ms ease-in-out`,
opacity: 0,
}
const transitionStyles = {
entering: { opacity: 1 },
entered:  { opacity: 1 },
};
const Fade = ({ in: inProp }) => (
<Transition in={inProp} timeout={duration}>
{(state) => (
<div style={{
...defaultStyle,
...transitionStyles[state]
}}>
I'm A fade Transition!
</div>
)}
</Transition>
);
return (
<div className="App">
<Fade in={this.state.show}/>
<button onClick={this.handleClick}>TOGGLE</button>
</div>
);
}
}
export default App;

Answer 1

好吧，很抱歉，我犯了一个简单的错误。

表示Fade组件抛出了我，我错误地将其嵌套在App组件中。

我将它及其相关consts移到了App组件之外，瞧！

import React, { Component } from 'react';
import Transition from 'react-transition-group/Transition'
const duration = 300;
const defaultStyle = {
transition: `opacity ${duration}ms ease-in-out`,
opacity: 0,
}
const transitionStyles = {
entering: { opacity: 1 },
entered:  { opacity: 1 },
};
const Fade = ({ in: inProp }) => (
<Transition in={inProp} timeout={duration}>
{(state) => (
<div style={{
...defaultStyle,
...transitionStyles[state]
}}>
I'm A fade Transition!
</div>
)}
</Transition>
);
class App extends Component {
state = { show: false }
handleClick = e => {
this.setState({show: !this.state.show})
}
render() {
return (
<div className="App">
<Fade in={this.state.show}/>
<button onClick={this.handleClick}>TOGGLE</button>
</div>
);
}
}
export default App;