`autoDestroy` makes component destoried before transition end.

Đang mở
#226 1 bình luận 0 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
45/100
Loại issue
Lỗi
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Đình trệ
Công nghệ
react, typescript
Lĩnh vực
frontend

Hướng nghiên cứu

Bắt đầu với logic render portal trong index.tsx và tái hiện hành vi bằng ví dụ CodeSandbox được liên kết. Đọc PopupInner.tsx và các callback vòng đời của CSSMotion để xác định khi nào transition leave kết thúc và afterVisibleChange hiện được xử lý như thế nào. Công việc được hoàn thành khi autoDestroy giữ popup trong suốt transition và chỉ hủy nó sau afterVisibleChange(false).

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

首先看这个示例： 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)。
Ngôn ngữ chính
TypeScript
Star
391
Fork
245
Không có pull request nào được merge trong 30 ngày

Hướng dẫn đóng góp

Chưa lập chỉ mục được hướng dẫn đóng góp cho kho mã nguồn này

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của react-component/trigger

Tất cả issue của react-component/trigger

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.