ReactCSSTransitionGroupアドオンを使用したReact Router v4コンポーネントの移行

Question

私は反応で非常に単純なコンポーネントの不透明なトランジションを実行しようとしています。 ReactCSSTransitionグループを使用してこれを実行していますが、正しく設定したと思っていますが、動作していないようです。

let {BrowserRouter,Link,Route} = ReactRouterDOM; 

let Router = BrowserRouter; 

let ReactCSSTransitionGroup = React.addons.CSSTransitionGroup; 

class Artwork extends React.Component { 

render() { 
return (
    <div> 
     <h3>Art</h3> 
    </div> 
); 
} 
} 

class Home extends React.Component { 
render() { 
return (
    <h1>Home</h1> 
); 
} 
} 

class User extends React.Component { 

render() { 
return (

    <div className="row"> 
    <div className="col-md-4"> 
     <h3>The User Page</h3> 
     <p>User ID:</p> 
     <li><Link to="/user/artwork">Artwork</Link></li> 
    </div> 
    <div className="col-md-8"> 
     <Route path="/user/artwork" component={Artwork}/> 
    </div> 

    </div> 

); 
} 
} 



class App extends React.Component { 

render() { 
return (

    <Router> 
     <div className="container"> 
      <div className="row"> 
       <div className="col-xs-10 col-xs-offset-1"> 
        <ul> 
        <li><Link to="/user">User</Link></li> 
        <li><Link to="/home">Home</Link></li> 
        </ul> 
       </div> 
      </div> 
      <hr/> 
      <div className="row"> 
       <div className="col-xs-10 col-xs-offset-1"> 
        <ReactCSSTransitionGroup 
        transitionName="example" 
        transitionAppear={true} 
        transitionAppearTimeout={1500}> 
        <Route path="/" exact component={Home}/> 
        <Route path="/home" exact component={Home}/> 
        <Route path="/user" component={User}/> 
        </ReactCSSTransitionGroup> 

       </div> 
      </div> 
     </div> 
    </Router> 

    ); 
    } 

} 

ReactDOM.render(
<App />, 
document.getElementById('root') 
); 

CSS

.example-appear { 
    opacity: 0.01; 
} 

.example-appear.example-appear-active { 
    opacity: 1; 
    transition: opacity 1500ms ease-in; 
} 

React route transitions

は、あなたがあなたのルーティングされたコンポーネントのそれぞれをラップする必要があなたに

Answer 1

ありがとう：私は私のcodepen下記参照してください。この上の任意の助けをいただければ幸いです<CSSTransitionGroup>にあるので、より高次の関数を作成してラップされたコンポーネントを返すことができます<CSSTransitionGroup>にあります。例えば、以下のcodepenを確認し、アニメーションで更新しました。

http://codepen.io/anon/pen/ZKENXy?editors=0111

高次成分のために、あなたはこちらに向かうことができます。

https://facebook.github.io/react/docs/higher-order-components.html