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匹配转换

回答

相关问题