如何在 React 中更改节点的 zIndex？

如何在 react-konva 中更改 zIndex 和重新排列组件？

当你直接使用 Konva 时，有很多方法可以更改节点的顺序，例如 node.zIndex(5)、node.moveToTop() 等等。教程。

但是，当你使用 React 框架时，不推荐使用这些方法。

react-konva 严格按照你在组件中描述的节点顺序。因此，不需要手动更改 zIndex，只需正确更新应用程序的状态即可。

不要在你的画布组件中使用 zIndex。

如果你想暂时将一个节点移动到另一个容器中，例如在你想显示一个覆盖层时，可以查看 Canvas Portal demo。

说明：试着拖动一个圆圈。看看它是如何移动到最上面的。我们通过操控状态来做到这一点，以便组件渲染返回正确的顺序。

import React, { Component } from 'react';
import Konva from 'konva';
import { Stage, Layer, Circle } from 'react-konva';

function generateItems() {
  const items = [];
  for (let i = 0; i < 10; i++) {
    items.push({
      x: Math.random() * window.innerWidth,
      y: Math.random() * window.innerHeight,
      id: 'node-' + i,
      color: Konva.Util.getRandomColor(),
    });
  }
  return items;
}

const App = () => {
  const [items, setItems] = React.useState(generateItems());

  const handleDragStart = (e) => {
    const id = e.target.name();
    const itemsCopy = items.slice();
    const item = itemsCopy.find((i) => i.id === id);
    const index = itemsCopy.indexOf(item);
    // 从列表中移除:
    itemsCopy.splice(index, 1);
    // 添加到顶部
    itemsCopy.push(item);
    setItems(itemsCopy);
  };

  const onDragEnd = (e) => {
    const id = e.target.name();
    const itemsCopy = items.slice();
    const item = items.find((i) => i.id === id);
    const index = items.indexOf(item);
    // 更新项的位置
    itemsCopy[index] = {
      ...item,
      x: e.target.x(),
      y: e.target.y(),
    };
    setItems(itemsCopy);
  };

  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        {items.map((item) => (
          <Circle
            key={item.id}
            name={item.id}
            draggable
            x={item.x}
            y={item.y}
            fill={item.color}
            radius={50}
            onDragStart={handleDragStart}
            onDragEnd={onDragEnd}
          />
        ))}
      </Layer>
    </Stage>
  );
};

export default App;

Open Sandbox