javascript - 页面之间的平滑过渡 - Reactjs

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

您应该通过克隆它并给它一个 key 来渲染子项，如下所示

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

根据example来自 react 路由器的组件