react-component / react-component/trigger

`autoDestroy` makes component destoried before transition end.

Abierto
#226 1 comentario 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Lenguaje dominante
TypeScript
Estrellas
391
Forks
245
Métricas de merge de PR
Sin PR fusionados en 30 d

Descripción

首先看这个示例: 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里了。
  • 还有一种,直接在这个文件里改,当popupVisiblefalse变成true的时候afterVisibleChange(true)。当this.popupRef.current<true>变成<false>的时候afterVisibleChange(false)。

Guía de contribución

No hay ninguna guía de contribución indexada para este repositorio

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Línea de trabajo

Comienza con la lógica de renderizado del portal en index.tsx y reproduce el comportamiento utilizando el ejemplo de CodeSandbox enlazado. Lee PopupInner.tsx y las callbacks del ciclo de vida de CSSMotion para determinar cuándo termina la transición de salida y cómo se gestiona actualmente afterVisibleChange. Se considera terminado cuando autoDestroy conserva el popup durante la transición y lo destruye únicamente después de afterVisibleChange(false).

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
react, typescript
Área
frontend
Tipo de issue
Error
Dificultad
4/5
Tiempo estimado
3-5 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
45/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.