React Router v4使用React Motion匹配轉換

我很喜歡RR4和RM，React Router V4已經有很好的例子（https://github.com/ReactTraining/react-router/tree/v4/website/examples），但我很努力的去理解如何使用新的V4 API在不同的匹配之間轉換在我的路由器與反應運動，淡入淡出我的'網頁'之間。React Router v4使用React Motion匹配轉換

我試着瞭解Transition示例如何與MatchWithFade協同工作，但我錯過了如何將其應用於表示我的頁面結構的多個匹配項。

作爲一個例子：在我的路由器中給出了兩個路由設置我如何通過TransitionMotion的react-motion來處理安裝和卸載？

<Router> 
    <div> 
    <Match pattern="/products" component={Products} /> 
    <Match pattern="/accessories" component={Accessories} /> 
    </div> 
</Router>

任何幫助將不勝感激。

來源

2016-11-07 Paul Crabtree

從鏈接的例子我們可以簡化。首先，我們創建一個包裝組件將取代<Match/>標籤和包裝它的成分：

import React from 'react' 
import { Match } from 'react-router' 
import { TransitionMotion, spring } from 'react-motion' 

const styles = {} 

styles.fill = { 
    position: 'absolute', 
    left: 0, 
    right: 0, 
    top: 0, 
    bottom: 0 
} 

const MatchTransition = ({ component: Component, ...rest }) => { 
    const willLeave =() => ({ zIndex: 1, opacity: spring(0) }) 

    return (
    <Match {...rest} children={({ matched, ...props }) => (
     <TransitionMotion 
     willLeave={willLeave} 
     styles={matched ? [ { 
      key: props.location.pathname, 
      style: { opacity: 1 }, 
      data: props 
     } ] : []} 
     > 
     {interpolatedStyles => (
      <div> 
      {interpolatedStyles.map(config => (
       <div 
       key={config.key} 
       style={{ ...styles.fill, ...config.style }} 
       > 
       <Component {...config.data} /> 
       </div> 
      ))} 
      </div> 
     )} 
     </TransitionMotion> 
    )} /> 
) 
} 

export default MatchTransition

然後我們使用這樣的：

<MatchTransition pattern='/here' component={About} /> 
<MatchTransition pattern='/there' component={Home} />

來源

2016-11-08 05:15:56 cyberwombat

感謝@yashua但這是我在我的文章中提到的例子。問題是如何做類似的事情，但在兩個不同的匹配之間轉換，就像我的例子。這可能就是我對反應運動如何運作的缺乏瞭解。 –

Duh ...臉巴掌。那麼你基本上只是想看看你鏈接的例子將如何應用於你的情況？沒有所有的彩色榮耀？ – cyberwombat

啊我看到了，我試圖使用一個單一的TransitionMotion，但我可以從您的示例中看到，我需要使用兩個。我會試試看，謝謝你的幫助！ –

React Router v4使用React Motion匹配轉換

回答

相關問題