집 >웹 프론트엔드 >JS 튜토리얼 >React는 재사용 가능한 포털 구성 요소의 예제 코드를 캡슐화합니다.

React는 재사용 가능한 포털 구성 요소의 예제 코드를 캡슐화합니다.

小云云원래의: 2018-01-03 09:31:432368검색

React의 핵심 중 하나는 컴포넌트입니다. 이 글에서는 주로 React 튜토리얼에서 Portal 재사용 가능 컴포넌트를 캡슐화하는 방법을 소개하고 있으며, 필요한 친구들은 아래에서 참고할 수 있습니다. 함께 배워요.

포털 소개

따라서 다음 작업을 수행하는 범용 구성 요소가 필요합니다.

구성 요소에서 선언적으로 작성할 수 있습니다.
선언된 위치에서는 실제로 렌더링되지 않습니다.
전환 애니메이션 지원

그러면 모달, 툴팁, 알림 등의 구성 요소가 이 구성 요소를 기반으로 할 수 있습니다. 우리는 이 구성요소를 포털이라고 부릅니다.

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. 렌더링 기능을 구현하고 createPortal을 사용하여 포털을 만듭니다.

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()

4. body에 dom 추가

render() {
 return ReactDOM.createPortal(
  this.props.children,
  this.el
 )
}

5. componentWillUnmount 함수 구현, DOM 구조 지우기

componentDidMount() {
 document.body.appendChild(this.el);
}

6. id, className, style

componentWillUnmount() {
   document.body.removeChild(this.el)
  }

7을 포함한 props 구현.

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)
 }
}

요약

createPortal과 Provide의 구현 아이디어는 목표를 달성하기 위해 함수형 프로그래밍 아이디어를 사용한다는 점에서 유사합니다. 이 기능이 유용하다고 생각되면 계속 사용해 보세요.

React는 재사용 가능한 포털 구성 요소의 예제 코드를 캡슐화합니다.

관련 기사