Home > Web Front-end > JS Tutorial > body text

What does the portal in react do?

王林
Release: 2020-12-22 15:40:07
Original
2001 people have browsed it

Portal in react can render child components to a subtree of non-parent components, while the parent component can still react to the child components; the usage method is such as [ReactDOM.createPortal(this.props.children, this.el);].

What does the portal in react do?

The environment of this article: windows10, react16, this article is applicable to all brands of computers.

Function:

Render the child component to a subtree of a non-parent component. At the same time, the parent component can still react to the child component. We don't even need to do too much DOM processing.

(Learning video sharing: react video tutorial)

Example:

Now there are two components, Dog and Cat, we want Dog The subcomponent Puppy is placed in Cat. When Puppy is bullied, Dog can feel it even if it is thousands of miles away.

Code implementation:

First get the Dog nest and Cat nest in the page

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

Create a Puppy component

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);
  }
}
Copy after login

Create Dog component

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);
Copy after login

Create another button component to replace bullying Puppy

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

Related recommendations: js tutorial

The above is the detailed content of What does the portal in react do?. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template