材料 UI 应用抛出错误中的模态反应组件

Question

这是我第一次在 React 应用程序上工作，我正在努力解决这个错误：

Portal.js:97 Uncaught TypeError: _reactDom.default.createPortal is not a function
at Portal.render (Portal.js:97)
at vendor.js?v=OjVxDpV6…sUejeIABZq7AE:30228
at measureLifeCyclePerf (vendor.js?v=OjVxDpV6…sUejeIABZq7AE:29508)
at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (vendor.js?v=OjVxDpV6…sUejeIABZq7AE:30227)
at ReactCompositeComponentWrapper._renderValidatedComponent (vendor.js?v=OjVxDpV6…sUejeIABZq7AE:30254)
at ReactCompositeComponentWrapper._updateRenderedComponent (vendor.js?v=OjVxDpV6…sUejeIABZq7AE:30178)
at ReactCompositeComponentWrapper._performComponentUpdate (vendor.js?v=OjVxDpV6…sUejeIABZq7AE:30156)
at ReactCompositeComponentWrapper.updateComponent (vendor.js?v=OjVxDpV6…sUejeIABZq7AE:30077)
at ReactCompositeComponentWrapper.performUpdateIfNecessary (vendor.js?v=OjVxDpV6…sUejeIABZq7AE:29993)
at Object.performUpdateIfNecessary (vendor.js?v=OjVxDpV6…sUejeIABZq7AE:12979)

这些是我文件中的导入：

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { FaceCard } from './FaceCard'
import { Modal } from '@material-ui/core';
import { Typography } from '@material-ui/core';

这是我认为抛出错误的代码：

<Modal
aria-labelledby="Title"
aria-describedby="Description"
open={true}
onClose={this.handleClose}
>
<div>
<Typography variant="title">
This is the title
</Typography>
<Typography variant="subheading">
This is what the modal can contains
</Typography>
</div>
</Modal>

当 open={true} 时会出现错误，但在 open={false} 时不会出现错误。

这是我的package.json文件：

{
"name": "xxxxx",
"private": true,
"version": "0.0.0",
"devDependencies": {
"@types/history": "^4.6.2",
"@types/react": "^16.3.0",
"@types/react-dom": "^16.0.6",
"@types/react-hot-loader": "^3.0.6",
"@types/react-router": "^4.0.26",
"@types/react-router-dom": "^4.2.7",
"@types/webpack-env": "^1.13.6",
"aspnet-webpack": "^2.0.3",
"aspnet-webpack-react": "^3.0.0",
"awesome-typescript-loader": "^3.5.0",
"bootstrap": "3.3.7",
"css-loader": "0.28.4",
"event-source-polyfill": "0.0.9",
"extract-text-webpack-plugin": "2.1.2",
"file-loader": "0.11.2",
"isomorphic-fetch": "2.2.1",
"jquery": "3.2.1",
"json-loader": "0.5.4",
"react": "^16.3.0",
"react-dom": "^16.3.0",
"react-hot-loader": "^3.1.3",
"react-router-dom": "^4.3.1",
"style-loader": "0.18.2",
"typescript": "^2.9.2",
"url-loader": "0.5.9",
"webpack": "2.5.1",
"webpack-hot-middleware": "2.18.2"
},
"dependencies": {
"@material-ui/core": "^1.2.1",
"npm": "^6.1.0",
"prop-types": "^15.6.1"
}
}

你知道发生了什么吗？

Answer 1

你不能将Boolean作为值写入render，你应该用state来解决这个问题：

state = { open: true };
<Modal
aria-labelledby="Title"
aria-describedby="Description"
open={this.state.open}
onClose={this.handleClose}
>
###############################################################
###############################################################
</Modal>

Answer 2

将导入替换为以下内容：

import React from 'react';
import ReactDOM from 'react-dom';
import { FaceCard } from './FaceCard'
import Modal from '@material-ui/core/Modal';
import Typography from '@material-ui/core/Typography';

FaceCard可能还需要删除其括号。

让我知道这是否有帮助！

Answer 3

如果您查看有关如何使用模态的 Material-UI 文档，那么他们希望您使用{}导入。

import Modal from '@material-ui/core/Modal';

同样的事情也适用于您对<Typography>的使用。导入FaceCard可能也不需要{}，具体取决于您从其文件中导出它的方式。

另外，也许npm足够聪明，可以弄清楚，但是您的许多devDependencies很可能dependencies。例如，react 和 react-dom 对于渲染你的应用程序当然至关重要。