chr*_*lmo 6 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 节点。我一直在关注本教程，它基本上提供了React Docs中所提供内容的简化概念证明。
我尝试过的：
我只能找到一个遇到类似问题的人的实例，他们能够通过安装 React > 16.3.0 版本来解决它。我正在运行 React 版本 16.8.6。
小智 17
我遇到了这个错误，尽管这是一个简单的修复。我曾说过：
import ReactDOM from 'react';
代替：
import ReactDOM from 'react-dom';
虽然它没有回答原始发布者的问题，但它可能会回答未来的开发人员。
我发现这可以工作并且 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。
| 归档时间： |
|
| 查看次数： |
724 次 |
| 最近记录： |