Was macht das Portal in React?

Das Portal in React kann untergeordnete Komponenten in einem Teilbaum von nicht übergeordneten Komponenten rendern, während die übergeordnete Komponente weiterhin auf die untergeordneten Komponenten reagieren kann. Die Verwendungsmethode ist wie folgt: [ReactDOM.createPortal(this.props.children, this.el ) ;].

Die Umgebung dieses Artikels: Windows10, React16, dieser Artikel gilt für alle Computermarken.

Funktion:

Rendern Sie die untergeordnete Komponente in einen Teilbaum einer nicht übergeordneten Komponente. Gleichzeitig kann die übergeordnete Komponente weiterhin auf die untergeordnete Komponente reagieren. Wir müssen nicht einmal zu viel DOM-Verarbeitung durchführen.

(Teilen von Lernvideos: Video-Tutorial reagieren)

Jetzt gibt es zwei Komponenten, Hund und Katze. Beim Mobbing von Welpen soll die Unterkomponente „Hund“ platziert werden Auch getrennte Hunde, die Tausende von Kilometern entfernt sind, können es spüren.

Code-Implementierung:

Zuerst das Hundenest und das Katzennest auf der Seite holen

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

Eine Welpenkomponente erstellen

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

Hundekomponente erstellen

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

Eine Schaltflächenkomponente erstellen, anstatt den Welpen zu schikanieren

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

Verwandte Empfehlungen:

js Tutorial

Das obige ist der detaillierte Inhalt vonWas macht das Portal in React?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!