Grasp this awesome API for escaping DOM restraints whilst creating Portals 🕹😎

뭐야?

앱의 DOM 계층 외부에 있는 구성 요소를 렌더링하기 위한 API입니다.

ReactDOM.createPortal(<Component/>, DOMElement)

직관적인 API 👍



캠프에 있는 사람들을 위해 TL;DR 데모를 보려면 아래로 스크롤하십시오!

왜요?

CSS 스타일이 요소를 제한하는 시나리오에 적합합니다. 예를 들어 stacking( z-index ) 및 overflow 문제가 있습니다. 새window에서 항목을 렌더링할 수도 있습니다! 😎

어떻게?

구성 요소의 메서드render에서 요소를 반환하는 대신 포털을 반환합니다.

const Outsider = () => ReactDom.createPortal(<div>I am outside</div>, document.body)

const App = () => <Outsider/>

Outsider는 document.body의 직계 후손으로 렌더링됩니다 👍

언제 사용합니까?

모달

툴팁

플로팅 메뉴

위젯

스코프 + 버블링

포털의 훌륭한 점은 포털에서 렌더링된 구성 요소가 마치 여전히 React 트리에 있는 것처럼 작동한다는 것입니다. 일반적인 React 자식처럼 동작합니다. 전달props , 업데이트 등에 반응합니다.

포털에서 발생한 이벤트는 React 트리를 통해 버블링됩니다! React 문서에서 예제를 확인하십시오.

기본 예제(모달)

일반적인 사용 사례인 Modal부터 시작하겠습니다. 모달은 현재 DOM 구조 외부에서 구성 요소를 렌더링해야 할 수 있는 좋은 예입니다.

우리의 Modal는 앱의 state 값을 기반으로 렌더링합니다.

const Modal = ({ children, onClose, open }) =>
  open
    ? ReactDOM.createPortal(
      <div className='modal'>
        <button className='modal__close' onClick={onClose}>&times;</button>
        { children }
      </div>,
      document.body
    )
  : null

이 예에서는 Modal에 document.body를 렌더링합니다. 우리의 Modal는 children , onClose 및 open 를 props 로 받아들이는 기능적 구성 요소입니다.

여기 작동 중입니다!

어리석은 예

비디오 게임 "포털"을 기억하십니까?



장면을 만들어 봅시다 😅
Man 🏃부터 시작하겠습니다. 우리는 Greensock의 Draggable를 사용하여 draggableMan을 만들 것입니다.



이제 "포털"로 장면을 만들어 보겠습니다. 우리 남자는 앱 컨테이너에 묶여있을 것입니다.

const App = () => (
  <Fragment>
    <Man bounds={rootNode} />
    <div className="portal portal--in"/>
  </Fragment>
)

그것은 우리에게



이제 ReactDOM.createPortal 참여합시다 😃

앱( DOM ) 외부의 #outside에 요소를 추가합니다. 또한 state가 앱 컨테이너에 있는지 여부를 추적하기 위해 Man를 생성합니다.

그런 다음 createPortal를 사용하여 Portal에서 #outside를 렌더링합니다. 그리고 outside가 true이면 createPortal를 사용하여 외부 요소에서 Man를 렌더링합니다 👍

<Man
  bounds={outside ? outsideElement : rootNode}
  onRelease={onRelease}
  outside={outside}
/>
<div className="portal portal--in" ref={innerPortalRef} />
{createPortal(
  <div ref={outerPortalRef} className="portal portal--out" />,
  outsideElement
)}

const ManRender = () => (
  <div className="man" ref={manRef} role="img">
    🏃
  </div>
);

return outside ? createPortal(<ManRender />, bounds) : <ManRender />;

우리의 Man는 이제 onRelease 함수도 호출합니다. 이렇게 하면 릴리스 시 포털 경계에 대해 커서 위치를 확인합니다. 포털에서 릴리스하면 state 값이 토글됩니다. 모든 코드는 데모에 있으며 그다지 많지 않습니다 👍



개발 도구를 사용하여 DOM을 검사하면 외부에서 렌더링이 발생하는 것을 볼 수 있습니다#app 👍

메모

방치하지 마세요 Accessibility ! 키보드 포커스 등을 유지하는 것은 매우 중요합니다.

[email protected] +

에서 사용 가능

그게 다야!

React의 포털에 대한 3분 소개!



질문이나 제안 사항이 있으시면 언제든지 답변 또는 ! 소셜에서 저와 연결되면 정말 좋겠습니다 😎