__WEBPACK_IMPORTED_MODULE_1_react_dom___default.a.createPortal 不是函数

问题描述 投票：0回答：7

错误：

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 节点。我正在关注本教程，它基本上为React Docs中的内容提供了一个简化的概念证明。

我尝试过的：

我只能找到一个遇到类似问题的人，他们能够通过安装 React > 16.3.0 的版本来解决它。我正在运行 React 版本 16.8.6.

javascript reactjs webpack react-dom
7个回答
13
投票

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

import ReactDOM from 'react';

代替：

import ReactDOM from 'react-dom';

虽然它没有回答原始发布者的问题，但它可能会为未来的开发者提供答案。

8
投票

我发现这会起作用，并且在 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
。

1
投票

在我的例子中，而不是使用下面的：

import ReactDOM from 'react-dom/client

改为：

import ReactDOM from 'react-dom'

现在工作。

0
投票

我有类似的问题，但分析我们只需要从“react-dom”本身导入 ReactDom 的问题。

import ReactDOM from 'react-dom/client'

作为

import ReactDOM from 'react-dom'

这行得通

0
投票

我有类似的问题，我使用 

import PortalReactDOM from 'react-dom'
而不是

`import ReactDOM from 'react-dom'`

代码看起来像

const Loader = () => {
return PortalReactDOM.createPortal(
<div className="wrapper">
    <div className="loader">
        <img src={loaderImage} alt="Loading..." />
    </div>
</div>,
document.getElementById("loader")
 )
0
投票

我有类似的问题，我遇到的是

import ReactDOM from "react";

后来改成了

import ReactDOM from "react-dom";

问题已解决，并且按预期工作。

0
投票

你可以导入这个：-

从“react-dom/client”导入 ReactDOM

您必须将此导入更改为：-

从“react-dom”导入 ReactDOM

然后您的错误将解决

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.