使用react-transition-group在轉換之前元素值移位和更改

Question

在我正在研究的gatsby項目中使用react-transition-group包時，我注意到了這種行為。 我有一個“標簽”列表，當從另一個主列表中選擇時，它們會添加到活動列表中。 單擊主列表中的標記會將其添加到活動列表中，單擊活動列表中的標記會將其刪除。 幾乎你會期望這樣的東西起作用。

在作品的過渡就好了，但轉出的標簽時，在一個陌生的方式重新組織起來。 我們有五個標簽，其中包含以下值：

• 無乳制品
• 派對食物
• 家庭規模
• 低膽固醇
• 低鈉

如果單擊Family Sized標記將其刪除，則會發生以下情況：

1. Family Sized立即消失
2. Low Cholesterol和Low Sodium立即向左移動
3. 最后一個標簽立即變為Low Sodium
4. 最后一個標簽，現在具有Low Sodium的值

預期的行為是Family Sized標簽從組中間的位置轉換出來。 我應該注意，如果從活動列表中刪除最后一個標記，它會正常工作，這只有在從任何其他位置刪除標記時才會發生。

這是轉換的慢速GIF ，這是我的代碼：

<TransitionGroup className='tag-container'>
  {filter.map((tag, index) => {
    return (
      <CSSTransition key={index} timeout={250} classNames={`tag`}>
        <TagButton value={tag} onClick={onClickFunction} className={`${screenStyle} active`}>{tag}</TagButton>
      </CSSTransition>
    )
  })}
</TransitionGroup>

• filter是一個從組件狀態中解析出來的數組。
• 如果重要的話， gatsby中的<StaticQuery>在gatsby的相同render()方法中使用。
• <TagButton>是樣式styled-components包中的styled-components ，而不是單獨導入的組件。

Answer 1

在數組中添加特定標識符並將每個元素的鍵設置為map方法中的每個標識符將解決您的問題。

import React from "react";
import ReactDOM from "react-dom";
import { Button } from "react-bootstrap";
import { CSSTransition, TransitionGroup } from "react-transition-group";
import "bootstrap/dist/css/bootstrap.css";
import "./styles.css";
import uuid from "uuid";

function App() {
  const [items, setitems] = React.useState([
    { id: uuid(), name: "Dairy Free" },
    { id: uuid(), name: "Party Food" },
    { id: uuid(), name: "Family Sized" },
    { id: uuid(), name: "Low Cholesterol" },
    { id: uuid(), name: "Low Sodium" }
  ]);
  const removeitem = item => {
    setitems(items.filter(itemname => itemname.id !== item));
  };
  return (
    <div className="App">
      <TransitionGroup className="todo-list">
        {items.map(data => (
          <CSSTransition timeout={500} classNames="item" key={data.id}>
            <Button className="m-2" onClick={() => removeitem(data.id)}>
              {data.name}
            </Button>
          </CSSTransition>
        ))}
      </TransitionGroup>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

這個問題已在這里解決，所以請結賬以了解這種奇怪的行為。

Answer 2

如果有人遇到此問題，以備將來參考。 問題在於如何將key傳遞給標記。

我的代碼通過filter數組進行映射，並將每個值的index指定為子組件的鍵。 這意味着它們被鍵入為0,1,2,3等。當從filter數組中刪除標記並重新呈現頁面時，將按照數組所處的順序重新應用索引，這意味着它們所有轉移而不是被移除的那個從任何地方被“拔出”。

解決方案是使用一個完全不依賴於數組索引值的唯一鍵。 這是我更新的內容：

<TransitionGroup className='tag-container'>
  {filter.map((tag) => {
    return (
      <CSSTransition key={`active_${tag}`} timeout={250} classNames={`tag`}>
        <TagButton value={tag} onClick={onClickFunction} className={`${screenStyle} active`}>{tag}</TagButton>
      </CSSTransition>
    )
  })}
</TransitionGroup>