React를 사용하여 Portal 재사용 가능한 구성 요소를 캡슐화하는 방법-JS 튜토리얼-php.cn

React를 사용하여 Portal 재사용 가능한 구성 요소를 캡슐화하는 방법

亚连

풀어 주다： 2018-06-14 11:45:42

원래의

1770명이 탐색했습니다.

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 &#39;react&#39;
import ReactDOM from &#39;react-dom&#39;
import PropTypes from &#39;prop-types&#39;
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(&#39;p&#39;)
 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 &#39;react&#39;
import ReactDOM from &#39;react-dom&#39;
import PropTypes from &#39;prop-types&#39;
function createPortal() {
 class Portal extends React.Component{
  constructor(props) {
   super(props)
   this.el = document.createElement(&#39;p&#39;)
   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()

로그인 후 복사

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.