React 16에서 ReactDOM.createPortal()을 사용하는 방법
React 16을 사용하고 있어 포털이 필요한데 이 기능에 대한 문서를 찾을 수 없습니다.이거 쓸 줄 아는 사람 있어요?
https://github.com/facebook/react/pull/10675
조언해 주셔서 감사합니다.
React v16은 몇 시간 전에 출시되었습니다(Yay!!).이것은 공식적으로 서포트되고 있습니다.
포털이란?언제부터 거기 있었어요?
포털은 상위 구성요소의 DOM 계층 외부에 존재하는 DOM 노드로 하위 항목을 렌더링하는 1등급 방법을 제공합니다.
Portal리액션 커뮤니티에서는 새로운 개념이 아닙니다.이러한 기능을 지원하는 라이브러리가 많이 있습니다.예를 들어 반응 반응 반응 및 반응 반응 반응 반응 반응.
리액트 앱을 렌더링하면 어떻게 됩니까?
일반적으로 React 응용 프로그램을 렌더링할 때 단일 DOM 요소를 사용하여 전체 React 트리를 렌더링합니다.
class HelloReact extends React.Component {
render() {
return (
<h1>Hello React</h1>
);
}
}
ReactDOM.render(<HelloReact />, document.getElementById('root'));
보시는 것처럼 리액트 컴포넌트를 ID를 가진 DOM 요소로 렌더링하고 있습니다.root.
포털이란 무엇이며 왜 필요한가?그게 왜 거기 있지?
포털은 반응 컨텍스트를 잃지 않고 상위 구성요소의 기본 DOM 계층 외부에 React 하위 항목을 렌더링하는 방법입니다.리액트 라우터와 같은 매우 인기 있는 라이브러리가 리액트 컨텍스트를 많이 사용하고 있기 때문에 강조하고 있습니다.따라서 사용 시 컨텍스트 가용성Portal많은 도움이 됩니다.
반응 보고서에 따르면
포털의 일반적인 사용 사례는 상위 구성요소가 오버플로우(숨김 또는 z-index 스타일)를 가지지만 하위 구성요소의 컨테이너에서 시각적으로 "분할"해야 하는 경우입니다.예를 들어 대화 상자, 호버 카드 및 도구 설명입니다.
따라서 포털을 사용하면 필요에 따라 병렬 반응 트리를 다른 DOM 노드에 렌더링할 수 있습니다.다른 DOM 노드에 렌더링되더라도 상위 구성요소는 수집되지 않은 이벤트를 포착할 수 있습니다.문서 자체에 기재되어 있는 이 코드펜을 참조해 주세요.
다음 예에서 더 많은 아이디어를 얻을 수 있습니다.
// index.html
<html>
<body>
<div id="root"></div>
<div id="another-root"></div>
</body>
</html>
// index.jsx
const mainContainer = document.getElementById('root');
const portalContainer = document.getElementById('another-root');
class HelloFromPortal extends React.Component {
render() {
return (
<h1>I am rendered through a Portal.</h1>
);
}
}
class HelloReact extends React.Component {
render() {
return (
<div>
<h1>Hello World</h1>
{ ReactDOM.createPortal(<HelloFromPortal />, portalContainer) }
</div>
);
}
}
ReactDOM.render(<HelloReact />, mainContainer);
https://codesandbox.io/s/62rvxkonnw
devtools inspect 요소를 사용하여 다음을 확인할 수 있습니다.<h1>I am rendered through a Portal.</h1>내부로 렌더링됩니다.#another-root단, 태그 붙이기 때문에<h1>Hello World</h1>내부로 렌더링됩니다.#root태그를 붙입니다.
이것이 도움이 되기를 바랍니다:)
업데이트: @PhillipMunin의 코멘트에 응답합니다.
와의 차이는 무엇입니까?
ReactDOM.render그리고.ReactDOM.createPortal
루트 )에서 컴포넌트의 이 컴포넌트를 했는가)
ReactDOM.createPortal따라서 자녀에 대한 모든 이벤트는 부모에게 전파됩니다(Ofc. 이벤트의 전파를 수동으로 중지하면 작동하지 않습니다).포털을 통해 렌더링된 구성 요소 내부에서도 동일한 컨텍스트에 액세스할 수 있습니다. 우리가 할 않아요.
ReactDOM.render직접적으로.
나는 내 요점을 설명하기 위해 또 다른 데모를 만들었다.https://codesandbox.io/s/42x771ykwx
root 요소 외부에 외부 dom 노드를 생성함으로써 동일한 기능을 얻을 수 있다고 생각합니다.
node = document.createElement('div')
document.body.appendChild(node)
ReactDOM.render(<Modal {...props} />,node)
예를 들어 모달뷰를 작성한다고 칩시다.모달뷰에 대한 래퍼를 작성할 수 있습니다.
import React, { useEffect } from 'react'
import ReactDOM from 'react-dom'
import Modal from './Modal'
let node = null
const ModalWrapper = (props) =>{
useEffect(()=>{
node && ReactDOM.render(<Modal {...props} />,node)
})
useEffect(()=>{
node = document.createElement('div')
document.body.appendChild(node)
ReactDOM.render(<Modal {...props} />,node)
},[])
return(
<script />
)
}
다음은 외부 라이브러리 없이 React Portal 및 React Hooks를 사용하여 모달 생성 예제입니다.
Typescript에서 나만의 커스텀 포털 컴포넌트를 구현한 방법은 다음과 같습니다.
import React from 'react'
import ReactDOM from 'react-dom'
const Portal: React.FC<PortalProps> = (props) => {
return ReactDOM.createPortal(props.children, props.target)
}
export interface PortalProps {
target: Element;
children: React.ReactNode;
}
export default Portal
은 '포털'을 '포털'이라고 부르면서 .createPortal render포포컴
render() {
return (
<div>
{ReactDOM.createPortal(this.renderPortal(), this.props.portalEl)}
</div>
)
}
renderPortal는 포털 포털 내에서 렌더링되는 콘텐츠는 반환해야 합니다.portalEl입니다.
최근 포털에 트위터를 한 사람이 리액트 테스트에서 해당 정보를 찾을 수 있습니다.
예를들면
const Popover = React.memo((props) => {
// your component implementation
return (
<div>Hi! I am a Popover in body!</div>
);
});
// This allows you to insert a component in the portal when you call the component;
export default function (props) {
return (
React.createPortal(<Popover {...props} />, document.body)
);
}
언급URL : https://stackoverflow.com/questions/46393642/how-to-use-reactdom-createportal-in-react-16
'programing' 카테고리의 다른 글
| 타이프 스크립트에서 두 날짜 사이의 시간을 계산하려면 어떻게 해야 합니까? (0) | 2023.03.12 |
|---|---|
| 장고 쿼리셋을 JSON으로 출력하려면 어떻게 해야 합니까? (0) | 2023.03.12 |
| Mongoose에서 두 개의 OR 쿼리를 AND와 결합합니다. (0) | 2023.03.12 |
| SwiftyJSON을 사용한 문자열 배열 해석 방법 (0) | 2023.03.12 |
| WooCommerce 재설치 후 인트로덕션 온보딩 마법사를 다시 활성화하는 방법 (0) | 2023.03.12 |