`autoDestroy` makes component destoried before transition end.
还没有人认领这个 Issue。
评估
- 难度
- 4/5
- 预计耗时
- 3-5 天
- 新手友好度
- 45/100
- Issue 类型
- 缺陷
- 描述清晰度
- 基本清楚
- 活跃度
- 停滞
- 技术栈
- react, typescript
- 领域
- frontend
调研方向
从 index.tsx 中的 portal 渲染逻辑开始,并使用链接的 CodeSandbox 示例复现该行为。阅读 PopupInner.tsx 和 CSSMotion 生命周期回调,以确定 leave transition 何时结束,以及 afterVisibleChange 当前是如何处理的。完成的标准是:autoDestroy 在 transition 期间保留 popup,并仅在 afterVisibleChange(false) 之后销毁它。
由索引模型根据 Issue 内容生成。
描述
首先看这个示例: 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)。
- 主要语言
- TypeScript
- 星标
- 391
- 派生
- 245
- PR 合并指标
- 30 天内没有已合并 PR
贡献指南
这个仓库没有索引到贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 Issue 编号。
react-component/trigger 的其他 Issue
-
难度 2/5 1-3 小时 新手友好度 65/100
react-component/trigger#593 · 1 个 reaction ·
-
难度 3/5 1-2 天 新手友好度 58/100
react-component/trigger#623 ·
-
难度 3/5 1-2 天 新手友好度 65/100
react-component/trigger#618 · 1 条评论 ·
-
难度 3/5 1-2 天 新手友好度 42/100
react-component/trigger#555 ·
-
难度 3/5 1-2 天 新手友好度 55/100
react-component/trigger#550 · 1 条评论 ·
查看 react-component/trigger 的全部 Issue
相似的 Issue
-
难度 2/5 1-3 小时 新手友好度 75/100
safetrustcr/dApp-SafeTrust#426 ·
-
area:workflow bug ready-for-agent
难度 2/5 1-3 小时 新手友好度 75/100
fil-donadoni/tolaria#4409 ·
-
难度 2/5 1-3 小时 新手友好度 70/100
Fission-AI/OpenSpec#1960 ·
-
Add dependabot 未关闭
难度 2/5 1-3 小时 新手友好度 70/100
-
难度 2/5 1-3 小时 新手友好度 75/100
corsairdev/corsair#1764 ·