Início / coding / Perguntas / 78020443
Accepted
Chinmay Pant
Asked: 2024-02-19 19:52:17 +0800 CST

Removendo um componente específico do DOM

  • 772

Estou trabalhando em um componente que funcionará como uma tela de desktop. Ele pode conter várias janelas de aplicativos que serão redimensionáveis ​​e arrastáveis ​​(ou seja, todas as janelas não serão idênticas )

Decidi armazenar a janela ativa em um objeto Array de detalhes da janela:

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

No meu componente de tela, estou mapeando esses arrays para renderizar cada um deles:

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

handleCloseé uma função muito simples que apenas atualiza o array para remover o objeto alvo da lista.

O problema surge quando altero a posição e as dimensões do AppWindow e, em seguida, fecho a janela, o objeto da janela é removido da lista, mas esse componente específico não. Isso faz com que o último AppWindowcomponente seja removido e os activeWindowsdados atualizados sejam mapeados para os componentes existentes, o que causa a troca de conteúdo (por exemplo: Se houver 4 janelas ativas e eu remover a janela 2 (ou seja, remover seu objeto activeWindows), então o objeto renderizado na janela 3 passará para a janela 2, portanto a dimensão e a posição do meu aplicativo 3 mudarão).

Não tenho certeza se esta é a melhor abordagem para lidar com esses tipos de cenários, mas meu principal objetivo é ser capaz de conseguir isso de uma forma que também seja eficiente em termos de memória, para que meu DOM/VDOM não fique cheio de coisas desnecessárias. elementos.

javascript

1 respostas

  1. Best Answer

    Você precisa adicionar um suporte de chave exclusivo às suas janelas

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

    É possível que você possa usar window.index, não tenho certeza se essa é uma chave exclusiva estável (as janelas na matriz nunca são reordenadas) na matriz do Windows ou não. Lembre-se de que você só poderá usá-lo se ele nunca mudar após a criação de uma janela.

    Caso contrário, considere criar um ID exclusivo quando uma janela for adicionada ao array e use-o como sua chave exclusiva.

    • 0

relate perguntas