react---portal

最新推荐文章于 2025-04-01 18:56:28 发布

霹雳桃

最新推荐文章于 2025-04-01 18:56:28 发布

阅读量312

点赞数

分类专栏： react 文章标签： react.js javascript ecmascript

本文链接：https://blog.youkuaiyun.com/weixin_46087056/article/details/125300978

版权

react 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何使用React Portal创建全局Modal组件，解决zindex和样式覆盖问题。通过将Modal渲染到body上，保持组件结构不变，同时确保事件冒泡正常工作。文章通过示例代码展示了Modal组件和Portal的结合使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react—portal

/*
全局 modal 组件
zindex 层级问题
样式覆盖问题
所以我们选择挂载 body 上

portal 组件嵌套结构没有发生改变,只是 dom 的渲染位置变了
portal 处理过的组件虽然 dom 渲染结构发生改变但是依然可以按照组件嵌套结构进行冒泡
*/

在需要的子组件中引入插件

import ReactDOM from "react-dom";

将子组件做处理，并抛出

class Modal extends PureComponent {
  constructor() {
    super();
  }
  state = {};

  render() {
    return (
      <div
        className="model"
        style={{
          position: "fixed",
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          background: "rgba(0,0,0,.6)",
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        loading
        <button onClick={this.props.close}>关闭</button>
      </div>
    );
  }

  componentDidMount() {}
}

class Box extends PureComponent {
  render() {
    return ReactDOM.createPortal(
      <Modal close={this.props.close}></Modal>,
      document.body
    );
  }
}

export default Box;