在REACT中展开/折叠列表

Question

我想要实现的是拥有一个元素列表（div或span），其中每个项目都可以通过点击进行展开和折叠。让我们举例说明以下图片： 默认情况下，列表将如左图所示：当我单击某个项目时（在此示例中为item2），该项目将展开以显示更多信息，并且如果其他项目已展开，则其他项目将折叠。含义我最多可以扩展一个项目。

我已经成功完成了这项工作，但是我希望项目能够平滑地展开/折叠，这意味着有一些动画。使用JQuery我会使用一些slideUp和SlideDown，但是在REACT我还没弄明白要做（我不应该像在JS vanilla和Jquery那样操纵DOM）。我已经看过＆＃39; React-Transition-Group＆＃39;模块，但我没有设法使用该模块。