React App.js引入Cart组件后页面空白无报错问题排查

白屏无报错的问题全部来自Modal.js的两处低级错误：

• ModalOverlay箭头组件没有返回值：函数体用花括号包裹后，内部直接写了JSX结构但没加return，组件执行后返回undefined，直接导致渲染中断。
• props属性拼写错误：给ModalOverlay传内容时，把内置的children属性错写成childres，就算组件正常返回也拿不到Cart传入的实际内容。

直接替换Modal.js的错误代码即可，修复后完整代码：

import React from "react";
import ReactDOM from "react-dom";
import classes from "./Modal.module.css";

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

const ModalOverlay = (props) => {
  // 补全return返回JSX结构
  return (
    <div className={classes.modal}>
      <div className={classes.content}>{props.children}</div>
    </div>
  );
};

const portalEl = document.getElementById("overlays");

const Modal = (props) => {
  return (
    <>
      {ReactDOM.createPortal(<Backdrop />, portalEl)}
      {ReactDOM.createPortal(
        // 修正拼写错误：childres -> children
        <ModalOverlay>{props.children}</ModalOverlay>,
        portalEl
      )}
    </>
  );
};

export default Modal;

如果上述修改完成后仍无法正常渲染，确认index.html中提前写好了Portal需要的挂载节点，位置和id必须匹配：

<body>
  <div id="root"></div>
  <!-- Portal弹窗挂载节点，不可遗漏 -->
  <div id="overlays"></div>
</body>

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