1

我的应用程序使用“react-transition-group”在页面之间路由，但每次我的投资组合 id 更新时，它都会重新渲染整个组件并运行过渡动画。我怎样才能做到这一点，一旦你进入我的投资组合页面，当只有 :id 更改时它不会重新呈现投资组合组件？

<Route render={({ location }) => (
        <TransitionGroup>
          <CSSTransition key={location.key} classNames='slide' timeout={800}>
            <Switch location={location}>

              <Route exact path='/' component={Home}/>
              <Route path='/portfolio/:id?' component={Portfolio}/>
              <Route path='/about' component={About}/>

            </Switch>
          </CSSTransition>
        </TransitionGroup>
      )}/>
4

1 回答 1

0

我想出了一个有点老套的解决方案，但它确实有效。我必须创建一个正则表达式来查找 /portfolio 之后的任何内容，然后使用它来确定密钥是否应该为空。

constructor() {
    this.omittedLocations = ['/portfolio', '/about'];
    this.omitLocations = this.omitLocations.bind( this );
}

...

omitLocations( location ) {

let key = 'randomtext';

this.omittedLocations.forEach( url => {

  let urlRegex = new RegExp( url + '(.*)' );

  if ( key != '' ) {

    let result = urlRegex.exec( location.pathname );

    if ( result ) {
      if ( result[0] ) {
        key = '';
      } else {
        key = location.key;
      }
    } else {
      key = location.key;
    }

  }

});

return key;

}

...

<Route render={({ location }) => (
    <TransitionGroup>
      <CSSTransition key={this.omitLocations(location)} classNames='slide' timeout={800}>
        <Switch location={location}>

          <Route exact path='/' component={Home}/>
          <Route path='/portfolio/:id?' component={Portfolio}/>
          <Route path='/about' component={About}/>

        </Switch>
      </CSSTransition>
    </TransitionGroup>
  )}/>
于 2019-01-12T17:31:29.523 回答