<Match/>反応ルータ4のコンポーネント

Question

に渡されるコンポーネントにリアクタ4を追加すると、簡単にcomponentの代わりにrenderを使用してコンポーネントを追加できます。一方

<Match pattern="/someroute" render={() => (
    <SomeComponent { ...additionalProps } /> 
) } /> 

---

、一つはまた、遷移一致ラッパーコンポーネントでラップすることによって<Match/>ルート間に遷移することができます。

ラッパーを参照：

TransitionMatchラッパー

<TransitionMatch pattern="/someroute" component={ RouteComponent } /> 

：

import React, { Component } from "react"; 
import { Match } from "react-router"; 
import { TransitionMotion, spring, presets } from "react-motion"; 

const TransitionMatch = ({ component: Component, ...matchProps }) => { 
    const willLeave =() => ({ 
     zIndex: 100, 
     opacity: spring(0, { stiffness: 300, damping: 30, precision: 1 }) 
    }); 

    return (
     <Match { ...matchProps } 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={{ 
           ...config.style, 
           position: "absolute", 
           top: 0, 
           left: 0, 
           bottom: 0, 
           right: 0 
          }} > 
           <Component { ...config.data } /> 
          </div> 
         )) } 
        </div> 
       )} 
      </TransitionMotion> 
     ) } /> 
    ); 
}; 

export default TransitionMatch; 

---

の問題は、どのように1が一緒にこれら二つの概念を適用することができ、のですか？

にはどうすれば効率的にTransitionMatchコンポーネントとパス追加の小道具に<Match />をラップすることができますか？ TransitionMatchのcomponent小道具を介してコンポーネントを渡すのではなく、render支柱を介して要素を渡すことができますので、私はそれに小道具を追加できますか？もしそうなら、私はどのようにTransitionMatchを実装しますか？

Answer 1

私は自分で解決策を見つけました。私はちょうど<TransitionMatch />に追加の小道具を渡さなければなりません、それをTransitionMatch定義のコンポーネント自体に広げてください。

参照TransitionMatch：

let mainProps = { 
    someMethod: this.someMethod, 
    someState: this.state.someState 
}; 

... 

<TransitionMatch pattern="/someroute" component={ SomeComponent } compProps={ mainProps } /> 
<TransitionMatch pattern="/someotherroute" component={ SomeOtherComponent } compProps={ mainProps } /> 

TransitionMatch定義：

import React, { Component } from "react"; 
import { Match } from "react-router"; 
import { TransitionMotion, spring } from "react-motion"; 

const FadeMatch = ({ component: Component, compProps, ...matchProps }) => (
     <Match { ...matchProps } children={ ({ matched, ...props }) => { 
      const motionProps = { 
       willLeave:() => ({ 
        zIndex: 100, 
        opacity: spring(0, { stiffness: 300, damping: 30, precision: 1 }) 
       }), 
       styles: (matched ? [ { 
        key: props.location.pathname, 
        style: { 
         opacity: 1 
        }, 
        data: props 
       } ] : []) 
      }; 

      return (
       <TransitionMotion { ...motionProps }> 
        { interpolatedStyles => (
         <div> 
          { interpolatedStyles.map(config => (
           <div key={config.key} style={{ 
            ...config.style, 
            position: "absolute", 
            top: 0, 
            left: 0, 
            bottom: 0, 
            right: 0 
           }} > 
            <Component { ...config.data } { ...compProps } /> 
           </div> 
          )) } 
         </div> 
        ) } 
       </TransitionMotion> 
      ); 
     } } /> 
); 

export default FadeMatch;