javascript - __WEBPACK_IMPORTED_MODULE_1_react_dom___default.a.createPortal 不是函数-6ren

javascript - __WEBPACK_IMPORTED_MODULE_1_react_dom___default.a.createPortal 不是函数

转载作者：行者123 更新时间：2023-12-04 12:00:37

错误:

TypeError: __WEBPACK_IMPORTED_MODULE_1_react_dom___default.a.createPortal is not a function

Modal.js:14
  11 | 
  12 | 
  13 | function Modal(props) {
> 14 |   return ReactDOM.createPortal(JSX_MODAL, document.querySelector("#modal"));
  15 | }
  16 | 
  17 |

代码:

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

const JSX_MODAL = (
  <div className="ui dimmer modals visible active">  
    <div className="ui standard modal visible active">
      THIS IS SOME TEXT IN THE MODAL // add some UI features here
    </div>
  </div>
);

function Modal(props) {
  return ReactDOM.createPortal(JSX_MODAL, document.querySelector("#modal"));
}

export default Modal;

在另一个组件的渲染函数中使用 {Modal()} 调用.

index.html(仅正文部分):

<body>
  <div id="root"></div>
  <div id="modal"></div>
</body>

依赖:

"react": "^16.8.6
"react-dom": "^16.0.0-alpha.13",

背景:

我正在尝试使用 React 门户将模式的内容呈现到它自己的 DOM 节点。我在关注 this tutorial ，它基本上为 React Docs 中的内容提供了一个简化的概念证明。 .

我试过的:

我只能找到 one instance of people experiencing a similar issue ，他们能够通过安装 React > 16.3.0 的版本来解决它。我正在运行 React 版本 16.8.6。

最佳答案

我有这个错误，虽然这是一个简单的修复。我说过:

import ReactDOM from 'react';

代替:

import ReactDOM from 'react-dom';

虽然它没有回答原始发布者的问题，但它可能会为 future 的开发者回答。

关于javascript - __WEBPACK_IMPORTED_MODULE_1_react_dom___default.a.createPortal 不是函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60597721/

文章推荐： Flutter 如何在表单中为特定小部件设置边距

文章推荐： python - 在 Networkx 图中绘制跟随其边缘的标签

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - __WEBPACK_IMPORTED_MODULE_1_react_dom___default.a.createPortal 不是函数