Que fait le portail en réaction ?

Le portail en réaction peut restituer les composants enfants dans un sous-arbre de composants non parents, tandis que le composant parent peut toujours réagir aux composants enfants ; la méthode d'utilisation est telle que [ReactDOM.createPortal(this.props.children) , this.el);].

L'environnement de cet article : Windows10, React16, cet article est applicable à toutes les marques d'ordinateurs.

Fonction :

Rendre le composant enfant dans un sous-arbre d'un composant non parent. En même temps, le composant parent peut toujours réagir au composant enfant. faire trop de traitement DOM.

(Partage vidéo d'apprentissage : tutoriel vidéo React)

Exemple :

Maintenant, il y a deux composants, Chien et Chat, nous voulons Chien Le sous-composant Le chiot est placé dans le chat. Lorsque le chiot est victime d'intimidation, le chien peut le ressentir même s'il se trouve à des milliers de kilomètres.

Implémentation du code :

Obtenez d'abord le nid de chien et le nid de chat dans la page

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

Créer un composant Chiot

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

Créer un composant Chien

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

Créez un autre composant de bouton pour remplacer le bully Puppy

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

Recommandations associées : Tutoriel js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!