这实在是太奇怪了。我花了很多时间才弄清楚如何解决这个问题。但即使修复了它，我也不知道为什么它会在一种配置中损坏，而在另一种配置中不会损坏。
解释这一点的最佳方法是使用 StackBlitz 现场示例：https ://stackblitz.com/edit/react-collapse-transition-breaks-with-dynamic-key
现场示例详细说明了确切的问题，但概要如下：
- 这是一个使用 Material UI 的 React 应用程序。
- 我有一个 <List>，其中填充有 <ListItem> 数组。
- 这些 <ListItem> 是可单击的。当您单击它们时，它会使用 <Collapse> 转换来公开“子标题”的子 <List>。子标题 <List> 也填充有 <ListItem> 数组。
- 这就是奇怪的地方：我有一个简单的 <div> ，其中包含“标题” <ListItem>和“子标题”的 <Collapse>-ible <List> 。
- 因为它们是数组的一部分，所以如果我不向顶级元素（<div>）添加“key”属性，React 就会抱怨。
- 如果我将动态生成的键值添加到包含 <div> 的键值中，它会以某种方式终止 <Collapse> 元素上的过渡动画。<Collapse> 仍然打开和关闭，但它不会在设定的毫秒数内产生动画效果。它只是打开（立即）或关闭（立即）。
- 如果我向包含 <div> 的相同元素添加静态键值，则动画效果很好。
为什么动态关键点方法会破坏动画？