webpack 创建门户不是一个函数

qacovj5a 于 2022-11-13 发布在 Webpack

关注(0)|答案(3)|浏览(149)

错误：

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;

它在另一个组件上的render函数中使用{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。

webpack

来源：https://stackoverflow.com/questions/60597721/webpack-imported-module-1-react-dom-default-a-createportal-is-not-a-function

3条答案

按热度按时间

zujrkrfu1#

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

import ReactDOM from 'react';

而不是：

import ReactDOM from 'react-dom';

虽然它没有回答楼主的问题，但它可能会回答未来的开发者。

赞(0）回复(0）举报 2022-11-13

unftdfkk2#

我发现这将工作，并没有在Chrome控制台警告：

import React from 'react'
import ReactDOM from 'react-dom/client'
import PortalReactDOM from 'react-dom'

//...

class Modal extends React.Component {
  //...

  render() {
    return PortalReactDOM.createPortal(this.props.children, this.el);
  }
}

//...
const root = ReactDOM.createRoot(appRootEl);
root.render(<Parent />);

也就是说，使用react-dom到createPortal，以及使用react-dom/client到creatRoot。

赞(0）回复(0）举报 2022-11-13

xfyts7mz3#

在我的情况下，而不是使用下面：

import ReactDOM from 'react-dom/client

更改为：

import ReactDOM from 'react-dom'

和工作。

赞(0）回复(0）举报 2022-11-13

我来回答

webpack 创建门户不是一个函数

3条答案

相关问题

热门标签

最新问答