reactjs - 交换键仍然引入新鲜的 DOM 元素

Question

在this例如，两个元素的键被交换，所以理论上，两个元素都应该有一个过渡，因为它们改变了不透明度。但显然，React 只保留一个元素，并用一个新元素替换另一个元素。这是错误还是我遗漏了 key 属性的语义？

Here是我使用更新效果的版本，以说明我想要实现的目标。我想知道这是否更好，因为我没有 oldIndex 状态。

JSX:

export default function App() {
  const [index, setIndex] = useState(0);
  const [oldIndex, setOldIndex] = useState();
  const [toggle, setToggle] = useState(0);
  const clickHandler = useCallback(
    (d) =>
      function () {
        setOldIndex(index);
        setIndex(index + d);
        setToggle(1 - toggle);
      },
    [index, toggle]
  );
  return (
    <div className="App">
      <button onClick={clickHandler(-1)}>Decrease</button>
      <button onClick={clickHandler(1)}>Increase</button>
      <h1 className="active" key={1 - toggle}>
        {index}
      </h1>
      <h1 className="inactive" key={toggle}>
        {oldIndex}
      </h1>
    </div>
  );
}

CSS:

.App {
  font-family: sans-serif;
  text-align: center;
}
h1 {
  position: absolute;
  width: 100%;
  transition: opacity 2000ms;
}
h1.inactive {
  opacity: 0;
}

Answer 1

这不是 React 问题，而是 DOM 问题。在 DOM API 中没有办法交换两个节点，唯一的方法是删除其中一个然后在不同的地方再次插入它，所以这就是 React 被迫做的。

您需要找到一种不同的方法来做到这一点，例如通过交换类和内容而不是尝试交换元素。