react-component / react-component/trigger
`autoDestroy` makes component destoried before transition end.
Nessuno ha ancora preso questa issue.
- Lingua principale
- TypeScript
- Stelle
- 391
- Fork
- 245
- Metriche di merge delle PR
- Nessuna PR unita negli ultimi 30g
Descrizione
首先看这个示例: 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的
onAppearEndonLeaveEnd等事件来得知动画消失的时机,来实现afterVisibleChange。不过这要改到PopupInner.tsx里了。 - 还有一种,直接在这个文件里改,当
popupVisible从false变成true的时候afterVisibleChange(true)。当this.popupRef.current从<true>变成<false>的时候afterVisibleChange(false)。
Guida per i contributori
Nessuna guida per i contributori indicizzata per questo repository
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Direzione di ricerca
Inizia dalla logica di rendering del portale in index.tsx e riproduci il comportamento utilizzando l’esempio CodeSandbox collegato. Leggi PopupInner.tsx e i callback del ciclo di vita di CSSMotion per determinare quando termina la transizione di uscita e come viene attualmente gestito afterVisibleChange. Il lavoro è completato quando autoDestroy mantiene il popup durante la transizione e lo distrugge solo dopo afterVisibleChange(false).
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- react, typescript
- Ambito
- frontend
- Tipo di issue
- Bug
- Difficoltà
- 4/5
- Tempo stimato
- 3-5 giorni
- Stato di attività
- Ferma
- Chiarezza
- Abbastanza chiara
- Idoneità per principianti
- 45/100