简单的 React.js 实现答案

【问题标题】：Simple React.js implementation简单的 React.js 实现
【发布时间】：2014-07-02 22:17:10
【问题描述】：

我有一个相对简单的应用程序，带有标题和主要内容部分。主要部分最多可以显示 4 种不同类型的组件，但一次只能显示 1 个组件。每个组件都需要能够根据状态从一个组件转换（滑动）到下一个组件。

到目前为止，我的主要应用程序组件保存着应该显示哪个组件的状态。这个主应用程序组件还呈现所有 4 个顶级组件。 4 个顶级组件hide/show 中的每一个都基于应用程序状态。这是打开和关闭不同组件的最佳方式，还是我应该手动安装和卸载每个组件？如果我采用mount/unmount 方法，我还能轻松转换每个元素吗？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

ReactCSSTransitionGroup 可能会满足您的需求，至少您可以查看实现以了解他们是如何做到的。

【讨论】：

【解决方案2】：

我会投票赞成或评论道格拉斯的回答，但我没有足够的代表！

ReactCSSTransitionGroup 会做你想做的事。采用tutorial 示例来满足您的目的，不要忘记先编写动画样式（ReactCSSTransitionGroup 依赖 CSS animationend 回调来了解元素何时离开/进入 dom）。它将为您添加辅助类，以便您可以在（传入和传出）元素之间创建过渡效果。

【讨论】：

如果您添加了一些示例，我可能会赞成您的回答，这样您的回答将比之前发布的更具信息性/描述性。
我确实链接到了教程，但是我在现实生活中的实际使用中唯一一次实现了这一点是在内部应用程序上（我显然不能分享）。这是我在学习 React 时制作的测试页面的链接。菜单淡入淡出效果使用 ReactCSSTransitionGroup 做一个简单的不透明过渡效果，当列表项被添加到 DOM 时：framework.anthonycregan.co.uk 我希望有一些用处。（现在关于那个赞成...）