<Match/> 반응 라우터가있는 구성 요소 4

Question

React Router 4에서는 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; 

---

문제는, 어떻게 하나이 두 개념을 함께 적용 할 수 있습니까?

어떻게 효율적으로 TransitionMatch 구성 요소 및 패스 추가 소품에 <Match />을 포장 할 수 있습니까? TransitionMatch의 component 소품을 통해 구성 요소를 전달하는 대신 render 소품을 통해 요소를 전달하여 소품을 추가 할 수 있습니까? 그렇다면 TransitionMatch를 어떻게 구현합니까?

Answer 1

Nevermind, 나 혼자서 해결책을 찾았습니다. 난 그냥 <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;