Question

我正在尝试创建一个单页应用程序，其中包含3个组件：索引，BluePage和GreenPage

我试图使用React和React路由器来切换它们。布局如下：

这个视图应该像一个滑动页面，可以更好地可视化，如下图所示：

为了进行这些转换，我目前正在使用ReactCSSTransitionGroup和CSS类，但是由于页面必须设置动画的方向取决于之前查看的页面，因此它变得越来越困难。

例如，如果BluePage在视图中，并且用户按下了＆＃34;返回＆＃34;，按钮，则索引应从右侧移动到视图中。

另一方面，如果GreenPage最初在视野中，则索引应从左侧移动到视图中。

问题

如何使用React Router将现有路径发送到下一个组件，这样我可以正确地为组件设置动画？
我应该继续使用ReactCSSTransitionGroup还是应该处理componentWillMount和componentWillUnmount回调中的动画？
- 如果是这样，在初始渲染工作后如何向对象添加CSS类？

如果这些问题看起来有些新手我很抱歉 - 我仍然是ReactJS的初学者。感谢您的帮助！

如果需要澄清，请告诉我。

Answer 1

在此组件中，您只需将所有视图（组件）添加为SwipeableView组件的子项。当前活动视图由index的{{1}} prop定义。您可以使用按钮切换视图，只需在主组件（例如SwipeableView）中创建状态，并在App处理程序中更新此状态。它看起来像这样：

onClick

希望它有所帮助！ ;）

编辑：我在示例中添加了一个按钮，说明在没有滑动效果时如何使用此组件。这是一个React组件而不是React Native，因此它可以在网站上运行，因此无需轻扫。我在我的一个项目中使用它。这是GIF。

Answer 2

我建议您使用swiper.js。为什么呢？

performant（桌面，移动）
不需要jquery
巨大的api，为您的用例提供了非常实用的功能
- 以编程方式更改幻灯片：swiper.slideTo(2)或swiper.nextSlide()）
- Hash/History Navigation：哈希和幻灯片之间的同步
- 您可以停用触控手势
- 等。

<强>设置

npm install swiper --save

导入

const Swiper = require('swiper'); or import Swiper from 'swiper';

<强>用法

请参阅demos with example