반응하는 포털은 무엇을 합니까?

반응의 포털은 하위 구성 요소를 상위 구성 요소가 아닌 하위 트리로 렌더링할 수 있지만 상위 구성 요소는 여전히 하위 구성 요소에 반응할 수 있습니다. 사용 방법은 [ReactDOM.createPortal(this.props.children, this.el) ) ;].

이 글의 환경: windows10, React16, 이 글은 모든 브랜드의 컴퓨터에 적용 가능합니다.

기능:

부모가 아닌 구성 요소의 하위 트리에 자식 구성 요소를 렌더링하는 동시에 부모 구성 요소는 여전히 자식 구성 요소에 반응할 수 있습니다. DOM 처리를 너무 많이 할 필요도 없습니다.

(학습 동영상 공유: react 동영상 튜토리얼)

예:

이제 Dog와 Cat이라는 두 가지 구성 요소가 있습니다. Puppy를 괴롭히는 경우에도 Dog의 하위 구성 요소인 Puppy를 배치하려고 합니다. 수천 마일 떨어져 있는 개들도 그것을 느낄 수 있습니다.

코드 구현:

먼저 페이지에서 Dog Nest와 Cat Nest를 가져옵니다.

const dogRoot = document.getElementById("dog-house");
const catRoot = document.getElementById("cat-house");

Puppy 구성 요소 만들기

class Puppy extends React.Component {
  constructor(props) {
    super(props);
    // 创建一个容器标签
    this.el = document.createElement("div");
  }

  componentDidMount() {
  	// 把容器标签挂到 catRoot DOM下
    catRoot.append(this.el);
  }

  componentWillUnmount() {
    catRoot.removeChild(this.el);
  }

  render() {
  	// 利用portal把Puppy的内容放到容器里
    return ReactDOM.createPortal(this.props.children, this.el);
  }
}

Dog 구성 요소 만들기

class Dog extends React.Component {
  constructor(props) {
    super(props);
    this.state = { bark: 0 };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
  	// 点击的时候 bark + 1
    this.setState((state) => ({
      bark: state.bark + 1,
    }));
  }

  render() {
 	// 看上去Puppy组件是在Dog挂在Dog组件里，但其实它被挂载在其它地方
    return (
      <div onClick={this.handleClick}>
        <p>The number of times a big dog barks: {this.state.bark}</p>
        <h3>Dog: </h3>
        <p>I can&#39;t see my children, but I can feel them</p>
        <Puppy>
          <Bully target={&#39;Puppy&#39;}/>
        </Puppy>
        <Bully target={&#39;Dog&#39;}/>
      </div>
    );
  }
}

ReactDOM.render(<Dog />, dogRoot);

Puppy를 괴롭히는 대신 버튼 구성 요소 만들기

function Bully(props) {
  return (
    <>
      <button>Bully the {props.target}</button>
    </>
  );
}

관련 권장 사항: js 튜토리얼

위 내용은 반응하는 포털은 무엇을 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!