javascript - 简单的 React.js 实现

Question

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

截至目前，我的主要应用程序组件保持着应该显示哪个组件的状态。此主要应用程序组件还呈现所有 4 个顶级组件。 4 个顶级组件中的每一个都根据应用程序状态隐藏/显示 自身。这是打开和关闭不同组件的最佳方法，还是我应该手动安装和卸载每个组件？如果我采用 mount/unmount 方法，我是否仍然能够轻松地转换每个元素？

Answer 1

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

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