portals
portals는 리액트 root 밖에 리액트를 넣을 수 있도록 해준다
iframe이나 html을 변경하지 못할 때 혹은 리액트 플러그인 내에서 렌더를 해야할 때 유용하다
리액트 루트 밖에서 렌더를 할때 사용할 수 있는 것이 portal이다
<body>
<header>
<span id="touchMe"></span>
</header>
<div id="root"></div>
</body>import React, { Component, Fragment } from 'react';
import { createPortal } from 'react-dom';
class Portals extends Component {
render() {
return createPortal(<Message />, document.getElementById("touchMe"));
}
}
const Message = () => "Just touched it!";
class App extends Component {
render() {
return (
<Fragment>
<Portals />
</Fragment>
)
}
}
'Web > React' 카테고리의 다른 글
| state 정의 (0) | 2018.05.24 |
|---|---|
| JSX 조건부 렌더링 (0) | 2018.05.24 |
| Return Types Strings and Fragments (0) | 2018.05.17 |
| connect API (0) | 2018.01.24 |
| Redux (0) | 2017.12.12 |