Hacktoberfest 2026: as issues que os mantenedores marcaram para outubro, abertas e boas para iniciantes. Ver issues do Hacktoberfest

`autoDestroy` makes component destoried before transition end.

Aberta
  • Algo errado?
#226 1 comentário 0 reações 0 responsáveis Ver no GitHub

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
4/5
Tempo estimado
3-5 dias
Facilidade para iniciantes
45/100
Tipo de issue
Bug
Clareza
Razoavelmente clara
Status de atividade
Estagnada
Stack de tecnologia
react, typescript
Domínio
frontend

Direção de pesquisa

Comece pela lógica de renderização do portal em index.tsx e reproduza o comportamento usando o exemplo vinculado do CodeSandbox. Leia PopupInner.tsx e os callbacks do ciclo de vida do CSSMotion para determinar quando a transição de saída termina e como afterVisibleChange é tratado atualmente. Considera-se concluído quando autoDestroy mantém o popup durante a transição e o destrói somente após afterVisibleChange(false).

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

首先看这个示例： https://codesandbox.io/s/cool-tree-2j0rm?file=/src/App.js
没有消失动画，去掉autoDestroy就有了。
其实都是和 https://github.com/ant-design/ant-design/issues/28151 这个有关的。
总而言之，就是没有正确实现afterVisibleChange。
destroy应该在完全消失动画结束后的，也就是afterVisibleChange(false)的时候。
看index.tsx中这段代码：

  let portal: React.ReactElement;
  // prevent unmounting after it's rendered
  if (popupVisible || this.popupRef.current || forceRender) {
	portal = (
	  <PortalComponent
		key="portal"
		getContainer={this.getContainer}
		didUpdate={this.handlePortalUpdate}
	  >
		{this.getComponent()}
	  </PortalComponent>
	);
  }

  if (!popupVisible && autoDestroy) {
	portal = null;
  }

  return (
	<TriggerContext.Provider
	  value={{ onPopupMouseDown: this.onPopupMouseDown }}
	>
	  {trigger}
	  {portal}
	</TriggerContext.Provider>
  );

我对你们代码不是100%了解。以下是我的猜测：

  • portal变成null，弹出内容就彻底消失了
  • popupVisible就是一般的visible，只要变成false，就会开始播放消失动画
  • this.popupRef.current是在一般情况下，即使popupVisible变成false，也能在播放消失动画的时候能渲染出来的原因。也就是动画结束this.popupRef.current会变成null。 猜错了this.popupRef.current只要开始显示了，就不会变成null了。

所以，我猜测应该这么改：

  • 一种，是用CSSMotion的onAppearEnd onLeaveEnd等事件来得知动画消失的时机，来实现afterVisibleChange。不过这要改到PopupInner.tsx里了。
  • 还有一种，直接在这个文件里改，当popupVisible从false变成true的时候afterVisibleChange(true)。当this.popupRef.current从<true>变成<false>的时候afterVisibleChange(false)。
Linguagem predominante
TypeScript
Estrelas
391
Forks
246
Nenhum PR com merge em 30d

Preparar o ambiente

Este projeto não oferece contêiner de desenvolvimento, Dockerfile nem guia de contribuição, então a configuração fica por sua conta: comece pelo README e veja nosso guia da primeira contribuição para os passos gerais.

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de react-component/trigger

Todas as issues de react-component/trigger

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.