1

私は RR4 と RM が大好きです。React Router V4 ( https://github.com/ReactTraining/react-router/tree/v4/website/examples ) の優れた例は既にありますが、どのように使用できるかを理解するのに苦労しています。新しい V4 API は、React Motion を使用してルーター内の異なるマッチ間を遷移し、「ページ」間でフェードインおよびフェードアウトします。

Transition の例が MatchWithFade でどのように機能するかを理解しようとしましたが、これを取得して、ページ構造を表す複数の一致に適用する方法がわかりません。

例として: Router に 2 つのルートが設定されている場合、TransitionMotion を使用して反応モーションでマウントとアンマウントを処理するにはどうすればよいですか?

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

どんな助けでも大歓迎です。

4

1 に答える 1

0

リンクされた例から単純化できます。まず、<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-08T05:15:56.527 に答える