React Portal

最新推荐文章于 2024-08-24 09:11:47 发布

小公鸡卡哇伊呀~

最新推荐文章于 2024-08-24 09:11:47 发布

阅读量467

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/ftell/article/details/122423053

版权

类似于Vue的 teleport 组件要调整其 wrap 的内容到 HTML DOM 恰当的位置，

<teleport to="body">
// something
</teleport>

Reat Portal 要实现的也是一样的目的，但是要调用 ReactDOM.createPortal() 方法，此方法需要两个参数，一个是组件，一个是HTML位置：

import React from "react";
import ReactDOM from "react-dom";
import Card from "./Card";
import Button from "./Button";

import classes from "./ErrorModal.module.css";

const Backdrop = (props) => {
  return <div className={classes.backdrop} onClick={props.onConfirm} />;
};

const ModalOverlay = (props) => {
  return (
    <Card className={classes.modal}>
      <header className={classes.header}>
        <h2>{props.title}</h2>
      </header>
      <div className={classes.content}>
        <p>{props.message}</p>
      </div>
      <footer className={classes.actions}>
        <Button onClick={props.onConfirm}>Okay</Button>
      </footer>
    </Card>
  );
};

const ErrorModal = (props) => {
  return (
    <React.Fragment>
      {ReactDOM.createPortal(
        <Backdrop onConfirm={props.onConfirm} />,
        document.getElementById("backdrop-root")
      )}
      {ReactDOM.createPortal(
        <ModalOverlay
          onConfirm={props.onConfirm}
          title={props.title}
          message={props.message}
          onConfirm={props.onConfirm}
        />,
        document.getElementById("overlay-root")
      )}
    </React.Fragment>
  );
};

export default ErrorModal;

然后要在 public/index.html 中设置相应的位置：

<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>

    <div id="backdrop-root"></div>
    <div id="overlay-root"></div>
    <div id="root"></div>
</body>