はトランジショングループV2は、私の周り私の頭を取得しようとしている状況

Question

を出/入をスキップして反応させ、私はドキュメントの作成反応するアプリと例を使用してデモを建てたが、それはスキップトランジショングループV2

に反応「状態に入る/出る」状態遷移を引き起こさない。

これまでのところ私は...。

試したインライン（ドキュメントのように）とクラス名を使用しても同じ結果が得られます。少し運を持つすべての小道具の周りいじっ 追加や削除、ブラウザ固有の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;