React のポータルは何をしますか?

反応のポータルは、子コンポーネントを親以外のコンポーネントのサブツリーにレンダリングできますが、親コンポーネントは引き続き子コンポーネントに反応できます。使用方法は [ReactDOM.createPortal(this.props.children)] のようなものです。 、this.el);]。

#この記事の環境: Windows10、React16、この記事はすべてのブランドのコンピューターに適用されます。

関数:

子コンポーネントを親以外のコンポーネントのサブツリーにレンダリングします。同時に、親コンポーネントは引き続き子コンポーネントに反応できます。 DOM 処理をやりすぎます。

(学習ビデオ共有:

反応ビデオ チュートリアル)

例:

Dog と Cat という 2 つのコンポーネントがあります。Dog サブコンポーネントが必要です。子犬は猫の中に置かれ、子犬がいじめられると、たとえ何千マイルも離れていても犬はそれを感じることができます。

コードの実装:

最初にページ内で Dog のネストと Cat のネストを取得します

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 id="Dog-nbsp">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 チュートリアル

以上がReact のポータルは何をしますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。