Question

我只想在所有页面之间添加平滑过渡。我使用了ReactCSSTransitionGroup并包装了主要布局。就像这样

class MainLayout extends Component {
  render () {
    return (
      <div>
        <TopNav />
          <ReactCSSTransitionGroup
            transitionName="example"
            transitionEnterTimeout={500}
            transitionLeaveTimeout={300}
            transitionAppear={true}
            transitionAppearTimeout={500}
          >
          {/* Content */}
          { this.props.content }
          </ReactCSSTransitionGroup>
        <BottomNav />
      </div>
    );
  }
}

这是我的路线配置。

 import React from 'react';
    import { mount } from 'react-mounter';
    import MainLayout from './layouts/MainLayout.jsx';
    import Home from './home/Home.jsx';

FlowRouter.route('/', {
  name: 'home',
  action () {
    mount(MainLayout, { content: (<Home />) });
    setTitle();
  },
});

现在它在第一次加载时工作正常。但转换在导航到其他页面时不起作用。我该如何解决？

Answer 1

你应该通过克隆它并给它一个键来渲染孩子，比如这个

{React.cloneElement(this.props.children, {
    key: this.props.location.pathname
})}

根据react-router

中的example组件

页面之间的平滑过渡 - Reactjs

1 个答案: