使用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>