javascript - __WEBPACK_IMPORTED_MODULE_1_react_dom___default.a.createPortal 不是函数

标签 javascript reactjs webpack react-dom

错误:

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/

相关文章:

javascript - 在渲染之前等待 react-promise 解决

webpack - Webpack,Babel 7.4.0和core-js 3

javascript - Vue + TypeScript - 用于放置自定义类型的推荐文件夹结构约定?

reactjs - 对 React 行为的一些见解将不胜感激。自定义钩子(Hook)的问题

webpack - 使用webpack在cesiumjs中出现Requirejs错误

javascript - 由于不适当的 jquery,wordpress 子菜单无法切换

javascript - 在electronicjs中出现: image could not be created from at app. createWindow错误

javascript - 在功能上前置一个数组元素

javascript - Tablesorter货币清洁

reactjs - 如何使用 Redux 和 ReactJS 等声明式/函数式样式库来处理焦点?