Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

`autoDestroy` makes component destoried before transition end.

Ouverte
  • Quelque chose ne va pas ?
#226 1 commentaire 0 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Évaluation

Difficulté
4/5
Temps estimé
3-5 jours
Accessibilité débutants
45/100
Type d'issue
Bug
Clarté
Plutôt claire
Activité
À l'abandon
Stack technique
react, typescript
Domaine
frontend

Piste de recherche

Commencez par la logique de rendu du portail dans index.tsx et reproduisez le comportement à l’aide de l’exemple CodeSandbox lié. Lisez PopupInner.tsx et les callbacks du cycle de vie de CSSMotion pour déterminer quand la transition de sortie se termine et comment afterVisibleChange est actuellement géré. Le travail est considéré comme terminé lorsque autoDestroy conserve le popup pendant la transition et ne le détruit qu’après afterVisibleChange(false).

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

首先看这个示例： 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)。
Langage dominant
TypeScript
Étoiles
391
Forks
246
Aucune PR mergée en 30 j

Préparer son environnement

Ce projet ne fournit ni conteneur de développement, ni Dockerfile, ni guide de contribution : l'installation est à votre charge. Commencez par son README, et consultez notre guide de la première contribution pour les étapes générales.

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de react-component/trigger

Toutes les issues de react-component/trigger

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.