`autoDestroy` makes component destoried before transition end.
まだ誰も着手していません。
評価
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 初心者へのやさしさ
- 45/100
- issue の種類
- バグ
- 明瞭さ
- おおむね明確
- 活発さ
- 停滞
- 技術スタック
- react, typescript
- 領域
- frontend
調査の方向性
index.tsx のポータルのレンダリングロジックから始め、リンク先の CodeSandbox の例を使って動作を再現してください。PopupInner.tsx と CSSMotion のライフサイクルコールバックを読み、leave トランジションがいつ終了するのか、また afterVisibleChange が現在どのように処理されているのかを確認してください。autoDestroy がトランジション中もポップアップを保持し、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 にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
react-component/trigger のほかの issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 65/100
react-component/trigger#593 · リアクション 1 件 ·
-
難易度 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時間 初心者へのやさしさ 72/100
0xMiden/bridge-portal#132 ·
-
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
-
難易度 2/5 1〜3時間 初心者へのやさしさ 82/100
-
area:tools bug good first issue help wanted priority:P2
難易度 2/5 1〜3時間 初心者へのやさしさ 90/100
TaewoooPark/Motifcode#14 ·
-
bug
難易度 2/5 1〜3時間 初心者へのやさしさ 84/100
newrelic-experimental/preflight#793 · コメント 1 件 ·