Question

React 键无效。

如果我交换位于转换item0的两个反应元素（item1和transform: translate();）的位置，则仅在元素以相同顺序呈现时触发css转换。

如果我更改渲染的顺序（位置交换仍然相同但现在item0在 item1之后呈现），则css过渡未触发。

看起来反应是删除DOM元素并重新创建它，即使他们设置了React键。

这是一个有问题的简单JSfiddle。

https://jsfiddle.net/santiagopuentep/vvpezbp9/2/

以下是书面解释：

两个React元素（item0和item1）在css中以transform: translate();定位，并且 css过渡对该变换有效。

该应用使用布局呈现项目列表。

第一个布局是： item0的{{1}}和translate(0px,0px);的第1项。

具有相同项目但位置翻转的第二个布局： translate(0px,50px);的{{1}}和item0的第1项。

点击这两个项目中的任何一个都会从两个位置来回更改布局，交换他们的位置，从而触发css过渡以进行位置更改。

这只是精细，转换正确触发。

如果第二个布局使item1渲染在 item0之后（仅在渲染顺序中更改，css翻译位置仍然交换），转换为，则会出现问题第二个元素丢失。

这看起来像React正在删除元素而不是仅重新排序它，即使我设置了键。

请帮忙！

Answer 1

非常感谢！我确认了这个问题，因此解决方法是：

lastOrder = []
render() {
    let cards=this.props.cardList
    // HERE I RESORT NEW LIST LIKE PREVIOUS IT
    if (this.lastOrder.length) cards.sort((a, b) => 
         (this.lastOrder.indexOf(a.id) - this.lastOrder.indexOf(b.id)))
    // AND SAVE LAST ORDER
    this.lastOrder = cards.map(card => card.id)
    return <div className='board'>
            {cards.map(card => <Card key={card.id} {...card} />)}
    </div>
}

如果元素排序发生变化，则React会丢失CSS转换

1 个答案: