React를 사용하여 Portal 재사용 가능한 구성 요소를 캡슐화하는 방법
- 亚连원래의
- 2018-06-14 11:45:421747검색
React의 핵심 중 하나는 컴포넌트입니다. 다음 글에서는 재사용 가능한 Portal 컴포넌트 캡슐화에 대한 React 튜토리얼에 대한 정보를 주로 소개합니다. 필요한 친구들은 이를 참고할 수 있습니다. .아래에서 함께 배워봅시다.
포털 소개
따라서 다음 작업을 수행하는 범용 구성 요소가 필요합니다.
구성 요소에 선언적으로 작성할 수 있습니다.
선언된 위치에서는 실제로 렌더링되지 않습니다.
전환 애니메이션 지원
그러면 모달, 툴팁, 알림 등의 구성 요소가 이 구성 요소를 기반으로 할 수 있습니다. 우리는 이 구성요소를 포털이라고 부릅니다.
React16+를 사용하는 경우 최소한 Portal에 대해 알고 있거나 사용에 능숙해야 합니다.
Portal은 루트 요소 외부에 DOM을 생성할 수 있습니다.
1. 일반적으로 웹 사이트에는 루트가 하나만 있습니다
<body> <p id="root"></p> </body>
2. Portal을 사용하면 다음과 같이 될 수 있습니다
<body> <p id="root"></p> <p id="portal"></p> </body>
Portal 고급 구성 요소 캡슐화
Portal 데모를 사용할 수 있습니다. 공식 웹사이트에서 우리가 달성하고자 하는 것은 이를 재사용 가능한 구성 요소로 캡슐화하는 것입니다.
Goal
본문 아래에 HTML을 수동으로 추가할 필요 없이 구성 요소를 통해 직접 만드세요.
<CreatePortal id, //可以传入id className, //可以传入className style //可以传入style > 此处插入p或者react组件 </CreatePortal>
구현 계획
1. 포털 구성 요소를 반환하는 createPortal 함수를 만듭니다.
function createPortal() {
}
export default createPortal()2. 포털 구성 요소 구현을 만듭니다.
import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'
function createPortal() {
class Portal extends React.Component{
}
return Portal
}
export default createPortal()3. createPortal을 사용하여 포털을 만듭니다.
render() {
return ReactDOM.createPortal(
this.props.children,
this.el
)
}4. body에 dom 추가
componentDidMount() {
document.body.appendChild(this.el);
}5. componentWillUnmount 함수 구현, DOM 구조 지우기
componentWillUnmount() {
document.body.removeChild(this.el)
}6. id, className, style
constructor(props) {
super(props)
this.el = document.createElement('p')
if (!!props) {
this.el.id = props.id || false
if (props.className) this.el.className = props.className
if (props.style) {
Object.keys(props.style).map((v) => {
this.el.style[v] = props.style[v]
})
}
document.body.appendChild(this.el)
}
}7을 포함한 props 구현.
import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'
function createPortal() {
class Portal extends React.Component{
constructor(props) {
super(props)
this.el = document.createElement('p')
if (!!props) {
this.el.id = props.id || false
if (props.className) this.el.className = props.className
if (props.style) {
Object.keys(props.style).map((v) => {
this.el.style[v] = props.style[v]
})
}
document.body.appendChild(this.el)
}
}
componentDidMount() {
document.body.appendChild(this.el);
}
componentWillUnmount() {
document.body.removeChild(this.el)
}
render() {
return ReactDOM.createPortal(
this.props.children,
this.el
)
}
}
Portal.propTypes = {
style: PropTypes.object
}
return Portal
}
export default createPortal() 위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다. 관련 기사:
위 내용은 React를 사용하여 Portal 재사용 가능한 구성 요소를 캡슐화하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!