Блог

Моя главная страница выглядит так :

 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 (  lt;Fragmentgt;   lt;div className="grid-intro"gt;  lt;div className="text-intro"gt;  Some Text  lt;/divgt;  lt;div className="modal-component-insert"gt;  lt;ModalA show={true}/gt;  lt;/divgt;  lt;div className="text-outro"gt;  Some text  lt;/divgt;  lt;/divgt;  lt;/Fragmentgt;  )  } }  

И мой компонент выглядит так :

 import React from "react";  import ReactDOM from "react-dom";  const Modal = ({ show, closed}) =gt; {  return (  ReactDOM.createPortal(  lt;gt;  lt;div className="modal"gt;  My Component  lt;/divgt;  lt;/gt;,  document.body  )  )  } export default Modal;  

Приведенный выше код отображает что-то вроде :

 Some Text Some Text My Component  

Почему мой компонент не отображается между текстами ? Существует ли конкретный способ для React отображать этот компонент между моими разделами ?

Вот ReactDOM.createPortal для чего это нужно. Это всегда будет перемещать вещи в нижнюю часть DOM. Таким образом, вы можете расположить его выше всего остального, используя CSS.

Похоже, вам это на самом деле не нужно, поэтому я бы просто заменил ваш код для модального компонента на:

 import React from "react";  const Modal = ({ show, closed}) =gt; {  return (  lt;div className="modal"gt;  My Component  lt;/divgt;  )  } export default Modal;