react中portal的作用-创新互联

小编给大家分享一下react中portal的作用，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

10年积累的成都网站设计、成都网站建设经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站设计后付款的网站建设流程，更有昌宁免费网站建设让你可以放心的选择与我们合作。

react中的portal可以将子组件渲染到非父组件的子树下，同时父组件仍能对子组件做出反应。使用方法如【ReactDOM.createPortal(this.props.children, this.el);】。

作用：

将子组件渲染到非父组件的子树下，同时父组件仍能对子组件做出反应，我们甚至不用做过多的dom处理。

举例：

现在有两个组件，Dog和Cat，我们想让Dog的子组件Puppy放到Cat里，当欺负Puppy的时候，即使相隔千里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>
        <h4>Dog: </h4>
        <p>I can't see my children, but I can feel them</p>
        <Puppy>
          <Bully target={'Puppy'}/>
        </Puppy>
        <Bully target={'Dog'}/>
      </div>
    );
  }
}

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

再创建一个代替欺负Puppy的按钮组件

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

以上是“react中portal的作用”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

名称栏目：react中portal的作用-创新互联
文章地址：https://www.cdcxhl.com/article36/dgdcsg.html

成都网站建设公司_创新互联，为您提供ChatGPT、网站制作、网站策划、关键词优化、虚拟主机、动态网站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联