为什么React中我的Modal组件未渲染在指定位置反而在页面底部？

你在Modal组件中使用了ReactDOM.createPortalAPI，该API的设计逻辑是将组件生成的DOM节点渲染到你传入的第二个参数指定的目标容器中，而非组件声明位置对应的父节点下。你的代码中指定的目标容器是document.body，因此Modal生成的DOM会被直接插入到body节点的末尾，最终在页面上展示在所有body内原有内容的后面，不会出现在两段文本中间。

方案1：不需要Portal能力，直接删除Portal逻辑 #

如果你的Modal没有需要避开父组件overflow限制、提升z-index层级之类的特殊需求，直接去掉createPortal包裹，组件就会正常渲染在你声明位置的父节点下：

import React from "react";

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

方案2：需要保留Portal能力，修改目标容器为指定位置的节点 #

如果你需要保留Portal的特性，只需要将Portal的目标容器改为你页面中两个文本中间的div.modal-component-insert节点即可，可通过id标识的方式实现：

1. 先给主页面的目标节点加id：

// 主页面代码修改部分
<div className="modal-component-insert" id="modal-target">
  <ModalA show={true}/>
</div>

2. 修改Modal组件的Portal目标容器：

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

const Modal = ({ show, closed}) => {
  // 获取指定位置的目标节点
  const targetNode = document.getElementById('modal-target')
  // 容错处理，节点不存在时返回空避免报错
  return targetNode ? ReactDOM.createPortal(
    <div className="modal">
      My Component
    </div>,
    targetNode
  ) : null
}
export default Modal;

内容的提问来源于stack exchange，提问作者Hugo