IT技术 - React Router v4 和 MatchWithFade 的问题 - 吾爱随笔录

这个问题与这篇文章有关：

...但我认为它值得自己提出问题。

我试图弄清楚如何使用<MatchWithFade>从这里获取的示例：

https://react-router.now.sh/animated-transitions

我看到的问题是，如果我有两个选项卡，并且我想在它们之间淡入淡出，我只会看到两个选项卡之一的淡入淡出效果，这取决于哪个<MatchWithFade>首先出现在我的代码中。

相关代码如下：

const One = () => {
  return (
    <div style={{position:'absolute', top: 0, left: 0, width: 300, backgroundColor: 'orange'}}>
      One one one one one one one one one one
    </div>
  )
}

const Two = () => {
  return (
    <div style={{position:'absolute', top: 0, left: 0, width: 300, backgroundColor: 'yellow'}}>
      Two two two two two two two two two two
    </div>
  )
}

class AppBody extends Component {

  render () {

    return (
      <div style={{position: 'relative'}}>
        <MatchWithFade pattern='/one' component={One} />
        <MatchWithFade pattern='/two' component={Two} />
      </div>
    )
  }
}

在这个例子中，导航到/one,（使用 React Router<Link>组件）将导致淡入淡出，但如果我导航到/two，则没有淡入淡出。然后，如果我<MatchWithFade pattern='/two' ... />首先列出，那么我会看到淡入淡出过渡到/two，而不是/one。

只是使用<Match>效果很好，所以我不认为这是我如何<BrowserRouter>配置的根本问题。

我希望我只是在做一些愚蠢的事情，但对于我的生活，我无法弄清楚是什么。任何指导表示赞赏。

更新

我无法弄清楚如何使用 React Router 制作 jsbin（无法弄清楚如何引用其上的方法和对象，因为我只通过 import 语句使用过 RR）。所以这是下一个最好的事情：这是一个演示这个问题的完整示例：

import React, { Component } from 'react';
import BrowserRouter from 'react-router/BrowserRouter'

import { TransitionMotion, spring } from 'react-motion'
import Match from 'react-router/Match'

import Link from 'react-router/Link';

const MatchWithFade = ({ component:Component, ...rest }) => {
  const willLeave = () => ({ opacity: spring(0) })

  return (
    <Match {...rest} children={({ matched, ...props }) => {
      return (
        <TransitionMotion
          willLeave={willLeave}
          styles={matched ? [ {
            key: props.location.pathname,
            style: { opacity: 1 },
            data: props
          } ] : []}
        >
          {interpolatedStyles => {
            return (
              <div>
                {interpolatedStyles.map(config => (
                  <div
                    key={config.key}
                    style={{...config.style }}
                  >
                    <Component {...config.data}/>
                  </div>
                ))}
              </div>
            )
          }}
        </TransitionMotion>
      )
    }}/>
  )
}

const One = () => {
  return (
    <div style={{position:'absolute', top: 0, left: 0, width: 300, border: '1px solid black', backgroundColor: 'orange', minHeight: 200}}>
      One one one one one one one one one one<br />
      One one one one one one one one one one<br />
    </div>
  )
}

const Two = () => {
  return (
    <div style={{position:'absolute', top: 0, left: 0, width: 300, border: '1px solid black', backgroundColor: 'yellow', minHeight: 200}}>
      Two two two two two two two two two two<br />
      Two two two two two two two two two two<br />
    </div>
  )
}


class App extends Component {

  render () {
    return (
        <BrowserRouter>
          <div style={{padding: 12}}>
            <div style={{marginBottom: 12}}>
              <Link to='/one'>One</Link> || <Link to='/two'>Two</Link>
            </div>
            <div style={{position: 'relative'}}>
              <MatchWithFade pattern='/one' component={One} />
              <MatchWithFade pattern='/two' component={Two} />
            </div>
          </div>
        </BrowserRouter>
    )
  }
}

export default App;

这个MatchWithFade和从 React Router 文档中提取的只有很小的区别。最大的区别是我拉出了zIndex引用，但这并没有影响行为。

如果相关，我使用开始了这个项目create-react-app，我使用的是 React Router version 4.0.0-alpha.6。