Question

这是我第一次使用React App，我正在努力解决这个错误：

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

使用以下内容替换您的导入：

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 2

您无法将render作为值state写入，您应该使用state = { open: true }; <Modal aria-labelledby="Title" aria-describedby="Description" open={this.state.open} onClose={this.handleClose} > ############################################################### ############################################################### </Modal>解决此问题：

import React, { Component } from "react";
import { Text, View, StyleSheet, WebView } from "react-native";
import { BASE_URL } from "../../../constants/apiList";
import SecondaryHeader from "../../common/SecondaryHeader";

class Payment extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isLoading: true,
      refreshing: false,
      isPiad: false,
      packages: []
    };
  }
  getParameterByName(name, url) {
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
      results = regex.exec(url);
    if (!results) {
      return null;
    }
    if (!results[2]) {
      return "";
    }
    return decodeURIComponent(results[2].replace(/\+/g, " "));
  }
  onNavigationStateChange = eve => {
    if (eve.loading !== this.state.isLoading) {
      this.setState({
        isLoading: eve.loading
      });
    }
    if (eve.url.indexOf("api/orders/") > -1) {
      this.props.navigation.replace("paymentStatus", {
        url: eve.url,
        id: this.props.navigation.state.params.id
      });
    }
  };
  render() {
    return (
      <View style={styles.container}>
        <SecondaryHeader title="PAYMENT" {...this.props} />
        <WebView
          source={{ uri: this.props.navigation.state.params.url }}
          onNavigationStateChange={this.onNavigationStateChange}
          style={{ height: 200 }}
          startInLoadingState={true}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  }
});

export default Payment;

Answer 3

如果您查看了Material-UI docs on how to use the modal，那么他们希望您使用{}导入。

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

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

此外，也许npm很聪明，可以解决这个问题，但很多devDependencies很可能dependencies。例如，react和react-dom对于渲染你的应用程序肯定是至关重要的。

模态反应组件材料-ui app抛出错误

3 个答案: