переходящих маршруты с дополнительными опорами на <Match/> компонент с 4 реагируют маршрутизатор

Question

в системе React Router 4, можно легко добавить дополнительные опоры, чтобы компонент передаются в <Match/> с помощью render вместо component.

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

---

С другой стороны, можно также переход между <Match/> маршрутов путем обертывания в компоненте обертки матча Переход.

Реферирование обертки:

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

TransitionMatch обертки:

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; 

---

Проблема заключается в том, , как можно применить эти два понятия вместе?

Как эффективно обернуть <Match /> в TransitionMatch компоненте и передача дополнительных подпорок к нему? Могу ли я передать элемент через опору render вместо передачи компонента через опору component TransitionMatch, чтобы я мог добавить реквизиты к нему? Если да, то каким образом я могу реализовать 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;