主页 / coding / 问题 / 78020443
Accepted
Chinmay Pant
Asked: 2024-02-19 19:52:17 +0800 CST

从 DOM 中删除特定组件

  • 772

我正在开发一个像桌面屏幕一样的组件。它可以包含多个可调整大小和可拖动的应用程序窗口（即所有窗口都不相同）

我决定将活动窗口存储在窗口详细信息对象数组中：

const [activeWindows, setActiveWindows] = useState([
   {
    index: 1,
    title: 'App1',
    isMinimized: false,
    dimensions: {
      ...
    }
  },
  {
    index: 2,
    title: 'App2',
    isMinimized: false,
    dimensions: {
      ...
    }
  },
])

在我的屏幕组件中，我映射这些数组以渲染它们中的每一个：

{
        activeWindows.map((window) => (
          <AppWindow 
            idx={window.index}
            title={window.title}
            dimensions={window.dimensions} //Initial dimension
            handleClose={handleClose}
          />
        ))
}

handleClose是一个非常简单的函数，仅更新数组以从列表中删除目标对象。

当我更改 AppWindow 位置和尺寸然后关闭窗口时，问题就出现了，窗口对象会从列表中删除，但特定组件不会。这会导致最后一个AppWindow组件被删除，更新的activeWindows数据会映射到现有组件，从而导致内容交换（例如：如果有 4 个活动窗口，并且我删除窗口 2（即从中删除其对象activeWindows），则渲染的对象窗口 3 中的内容将移动到窗口 2，因此我的应用程序 3 的尺寸和位置将发生变化）。

我不确定这是否是解决此类场景的最佳方法，但我的主要目标是能够以一种内存高效的方式实现这一点，这样我的 DOM/VDOM 就不会被不必要的东西填满元素。

javascript

1 个回答

  1. Best Answer

    您需要向您的窗口添加一个独特的 key prop

    activeWindows.map((window) => (
          <AppWindow 
            key={unique-key-for-this-window}
            idx={window.index}
            title={window.title}
            dimensions={window.dimensions} //Initial dimension
            handleClose={handleClose}
          />
        ))

    您可能可以使用 window.index，我不确定这是否是 windows 数组中稳定的（数组中的窗口永远不会重新排序）唯一键。请记住，只有在窗口创建后它从未改变时，您才能使用它。

    如果不是，请考虑在将窗口添加到数组时创建一个唯一 ID，并将其用作唯一键。

    • 0

相关问题