模态形式：react__webpack_imported_module_0 __。createPortal不是函数

Question

我正在开发购物车应用程序，我想使用模态表单在下订单之前显示购物车的内容和其他选项，这就是为什么我使用门户的原因，到目前为止，我的Modal.js的源代码看起来像这：

import { Fragment } from 'react';
import ReactDOM from 'react';
//import ReactDOM from 'react-dom/client';

import classes from './Modal.module.css';

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

const ModalOverlay = (props) => {
  return (
    <div className={classes.modal}>
      <div className={classes.content}>{props.children}</div>
    </div>
  );
};

const portalElement = document.getElementById('overlays');

const Modal = (props) => {
  return (
    <Fragment>
      {ReactDOM.createPortal(<Backdrop onClose={props.onClose} />, portalElement)}
      {ReactDOM.createPortal(
        <ModalOverlay>{props.children}</ModalOverlay>,
        portalElement
      )}
    </Fragment>
  );
};

export default Modal;

当我尝试加载模态形式时-Clicking在图标上 - 我得到此错误：

这是我正在使用的React版本：

此代码曾经在以前版本的React（17.x）上使用，这是我尝试降级但仍然遇到相同错误的奇怪的事情。

我的问题是：

1. 在React的Ver 18.x中，门户已更改？
2. 为了测试我的代码，我如何降级正确响应？
3. 您还有其他建议如何使用React的18克服这个问题？

多谢

Answer 1

我有同样的错误，我通过导入

import ReactDOM from 'react-dom';

而不是解决

import ReactDOM from 'react-dom/client';