javascript - 元素值在使用 react-transition-group 转换之前移动和更改

Question

我在使用 react-transition-group 时注意到了这种行为打包在我正在处理的 gatsby 项目中。我有一个“标签”列表，当它们是从另一个主列表中挑选出来时，它们被添加到一个事件列表中。单击主列表中的标签将其添加到事件列表中，单击事件列表中的标签将其删除。几乎与您期望的类似工作方式一样。

转换 in 工作得很好，但是当转换 out 时，标签以一种奇怪的方式重新组织自己。我们有五个具有以下值的标签:

• 不含乳制品
• 派对食品
• 家庭规模
• 低胆固醇
• 低钠

如果您单击 Family Sized标记将其删除，会发生以下情况:

1. Family Sized立即消失
2. Low Cholesterol和 Low Sodium立即向左移动
3. 最后一个标签变为Low Sodium立即
4. 最后一个标签，现在的值为Low Sodium过渡出来

预期的行为是 Family Sized标签从它在组中间的位置过渡出来。我应该注意到，如果您从事件列表中删除 last 标签，它会正常工作，这只会在从任何其他位置删除标签时发生。

这是一个slowed-down 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是从组件状态解构的数组。
• 有一个<StaticQuery>来自 gatsby用于相同的 render()组件的方法(如果重要的话)。
• <TagButton>是来自 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);

这个问题已经解决了here ，所以请结帐以了解这种奇怪的行为。