Reactjsはアドオンを使わずに離れるコンポーネントをアニメーション化します

Question

react.jsでは、私はアドオンReactCSSTransitionGroupを使ってアニメーションを実行できることを認識しています。 学習プロセスの一部として、入室時と退室時にコンポーネントをアニメーション化するために「vanilla js」を記述しようとしています。

私は子コンポーネントが

class Child extends React.Component { 
    constructor(props) { 
    super(props) 
    this.state = { opacity: 0 } 
    } 
    componentDidMount() { 
    this.setState({ opacity: 1 }) // change the opacity when the component is mounted 
    } 
    render() { 
    <div style={{ transition: 'opacity 0.3s', opacity: this.state.opacity }}> 
     I am a child component 
    </div> 
    } 
} 

class Parent extends React.Component { 
    render() { 
    return this.props.someProp === true ? <Child /> : null 
    } 
} 

に入るに装着された際に、以下のようにいくつかの簡単なコードが出ているしかし、私は残して上のコンポーネントをアニメーション化する方法に苦労しています。 componentWillUnmountは、コンポーネントが削除されるため、this.setState({ opacity: 0 })では機能しません。私はReactCSSTransitionGroupでソースコードを読もうとしましたが、要点を得ていないようです。誰でも簡単なサンプルコードを提供して、コンポーネントを放置して実装する方法を説明できますか？

Answer 1

実際には、コンポーネント自体の中からこれを処理することはできません。そのため、あなたはReactCSSTransitionGroupコンポーネントの子にのみリアクショントランジションを使用できます。これは、

に記載されているように、ReactTransitionGroup要素で追加された新しいライフサイクルメソッドを使用して処理されます。コールバックが呼び出されるまでDOMから要素を削除しない重要なメソッドがあります。したがって、あなた自身が類似した動作を実装したい場合は、同様のアプローチを取って、子のライフサイクルを処理し、おそらくそれを拡張するラッピングコンポーネントを作成する必要があります。