陣營過渡小組V2跳過進/出狀態

Question

我想圍繞我的頭陣營過渡小組V2

我使用CREATE-反應，應用程序和文檔中的例子建立了一個演示，但它跳過了進入/退出狀態「並且不會觸發轉換。

到目前爲止我有...。

嘗試內聯（如在文檔中），也使用類名稱，但結果相同。 添加和刪除特定瀏覽器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

好的，我的道歉，我犯了一個簡單的錯誤。

The Presentational 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;