Reactjs 反应塌陷过渡不'；当使用动态关键点包装在div中时，无法设置动画

这真的很奇怪。我花了好几个小时才想出如何解决这个问题。但即使它被修复了，我也不知道为什么它在一个配置中坏了，而在另一个配置中却没有

解释这一点的最佳方法是使用StackBlitz live示例：

现场示例详细说明了确切的问题，但以下是概要：

• 这是一个使用材质UI的React应用程序
• 我有一个用一个s数组填充的
• 那些是可点击的。当您单击它们时，它使用转换来显示“子标题”的子标题。子标题s也填充了一个s数组
• 这里是它变得奇怪的地方：我有一个简单的，包含“header”和“subheaders”的缩写
• 因为它们是数组的一部分，所以如果我不向顶级元素（元素）添加“key”属性，React会发出抱怨
• 如果我将动态生成的键值添加到包含的键值，它会以某种方式终止元素上的过渡动画。仍然会打开和关闭，但在设定的毫秒数内不会设置动画。它只是打开（立即）或关闭（立即）
• 如果我将静态关键点值添加到同一个包含中，动画就可以正常工作

---

为什么动态关键点方法会破坏动画？？？

TLDR：不要为React中的数组元素动态生成全局唯一的关键点。

好吧，在反复尝试谷歌搜索之后，我想我终于明白发生了什么

在React中将项添加到数组时，如果未向数组中的每个元素添加唯一的“键”，则会引发警告。只要您为每个元素使用唯一的“key”值，警告就会消失，而且在大多数情况下，React似乎可以很好地管理数组元素

当我开始React开发时（几年前），我想，“我可以通过使用随机GUID生成函数向所有数组元素添加唯一键来轻松解决这个问题。因此我经常使用如下代码：

let newArray = [];
someMasterArrayOfObjects.forEach(object => {
   if (someConditionIsMet) {
      // SEE HOW CLEVER I THOUGHT I WAS??  USING A RANDOMLY-GENERATED GUID QUIETS THE 
      // UNIQUE-KEY WARNINGS THAT ARE THROWN BY REACT
      newArray.push(
         <div key={createRandomGuid()}>
            {object.title}
         </div>
      );
   }
});

让newArray=[]；
someMasterArrayOfObjects.forEach（对象=>{
if（someConditionIsMet）{
//看看我认为自己有多聪明？？使用随机生成的GUID可以使
//REACT引发的唯一密钥警告
newArray.push(
{object.title}
);
}
});

但是我错过了ReactJS文档中的一个关键词（重点，我的）：

键有助于识别哪些项已更改、已添加或已删除。应为数组中的元素提供键，以使元素具有稳定的标识：

他们在文档中多次使用“稳定”一词，但它并没有真正深入我的大脑。与大多数开发人员一样，我首先关心的是删除当数组元素缺少唯一键时抛出的警告。使用随机生成的GUID解决了这个问题

但是React使用这些键来确定在状态更改期间应该重新呈现什么。如果每次在数组中构建元素时都随机生成一个新的全局唯一键，那么React将假定每次设置状态时都需要从头开始完全重建所有这些元素

至少，这是低效的。您可能不会注意到小型阵列/应用程序中的任何性能影响，但没有理由在每次出于任何原因设置该状态时人为地强制重新呈现每个阵列元素。您可能不会注意到应用程序中的任何视觉问题，但这是一种糟糕的做法

在最坏的情况下，它实际上会破坏一些功能。在我的情况下，它会破坏过渡动画，因为渲染引擎无法比较增加的“高度”“一种状态变化和另一种状态变化之间的价值——因为每次尝试改变高度时，我都会给“关键”值分配一个全新的、全球唯一的标识符，React将其视为一个全新的、完全不同的组成部分

一旦我最终找到了谷歌的目标，我还发现了一个很棒的JSFIDLE：

请注意，在他的示例中，输入的中心行标题为“唯一随机键”。当您手动更改其中一个唯一随机键的值时，然后单击“添加项”，更改的结果就会消失，因为它会将输入元素重新呈现为全新的元素，而和它们以前的状态并没有关联