javascript - Ant Financial의 Modal 메소드는 어떻게 페이지 끝에 요소를 삽입합니까?

Question

Ant Financial의 React Modal 방식과 유사하게 React를 사용하여 공개 팝업 모듈을 작성하고 싶습니다.

이 구현의 원리가 무엇인지 모르겠습니다. 내가 작성한 팝업창을 페이지 끝에 어떻게 삽입하나요?

Answer 1

모달 구현의 소스 코드를 보면 이해하기 쉽습니다. 간단히 말해서:

으아악

Answer 2

@ssruoyan
ES6 구문을 사용하여 이를 어떻게 구현할 수 있나요?

Answer 3

모달의 가시성은 가시성에 따라 결정됩니다. 오늘 작성한 모바일 코드입니다. 무슨 뜻인지 잘 모르겠습니다

Answer 4

실제로는 반응 범위 밖에서 렌더링되고 컴포넌트를 사용합니다

여기에는 ReactDOM.unstable_renderSubtreeIntoContainer 인터페이스가 포함됩니다.
그러나 이 인터페이스는 문서에서 사용할 수 없으며 불안정하다고 표시되어 있습니다

시그니처는 이렇습니다

으아악

이런 용도로 쓸 수도 있겠네요

으아악

구체적인 사용법은 React-Portal
사용법이나 Ant Financial의 Ant Design

사용법을 참고하세요.

서명과 정의는 여기에서 확인할 수 있으며 이에 대한 설명도 있습니다

사실 저는 이 인터페이스의 사용법을 완전히 이해하지 못했습니다... 정확한지는 잘 모르겠습니다. 위 링크의 코드를 직접 읽어보세요