为什么 react 会在我的页面底部显示我的功能组件？答案

【问题标题】：Why does react display my functional component at the bottom of my page?为什么 react 会在我的页面底部显示我的功能组件？
【发布时间】：2022-01-02 17:23:00
【问题描述】：

我的主页是这样的：

import React from "react";
import { Fragment } from "react";
import ModalA from "../components/Modal/ModalOptionA";

export default class AePage extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <Fragment>    
        <div className="grid-intro">
          <div className="text-intro">
            Some Text
          </div>
          <div className="modal-component-insert">
            <ModalA show={true}/>
          </div>
          <div className="text-outro">
            Some text
          </div>
        </div>
      </Fragment>
    )
  }
}

我的组件看起来像这样：

 import React from "react";
 import ReactDOM from "react-dom";

const Modal = ({ show, closed}) => {
  return (
    ReactDOM.createPortal(
      <>
      <div className="modal">
        My Component
      </div>
      </>,
    document.body
    )
  )  
}
export default Modal;

上面的代码显示如下：

Some Text
Some Text
My Component

为什么我的组件不显示在文本之间？ React 是否有特定的方式在我的 div 之间显示此组件？

【问题讨论】：

标签： reactjs react-component

【解决方案1】：

这就是ReactDOM.createPortal 的用途。它总是将东西移动到 DOM 的底部。这样，您就可以使用 CSS 将其置于其他所有内容之上。

看来您并不真的需要它，所以我只需将您的 Modal 组件代码替换为：

import React from "react";

const Modal = ({ show, closed}) => {
  return (
      <div className="modal">
        My Component
      </div>
  )  
}
export default Modal;

【讨论】：