尝试导入错误：“SelectionPage”未从

Question

我正在实现选择页面，用户可以在其中单击按钮 1 或 2。单击按钮后，用户将被重定向到相应的页面。为了简化测试，我只SelectionPage在所有选项中使用。问题是我得到了错误：Failed to compile./src/App.jsAttempted import error: 'SelectionPage' is not exported from './components/SelectionPage'.如果我导出它，我不清楚为什么SelectionPage不能导出（见下文）。App.js 的代码import React, { Component } from 'react';import './App.css';import { SelectionPage } from './components/SelectionPage';class App extends Component {  state = {    renderView: 0  };  clickBtn = e => {    console.log(e.target.value);    this.setState({      renderView: +e.target.parentNode.value    });  };  render() {    switch (this.state.renderView) {      case 1:        return (          < SelectionPage />        );      case 2:        return (          < SelectionPage />        );      default:        return (          < SelectionPage />        );    }  }}export default App;SelectionPage.js 的代码：import React from 'react';import Button from '@material-ui/core/Button';import Grid from "@material-ui/core/Grid";import CssBaseline from "@material-ui/core/CssBaseline";import Card from "@material-ui/core/Card";import CardContent from "@material-ui/core/CardContent";import Typography from "@material-ui/core/Typography";import withStyles from "@material-ui/core/styles/withStyles";const styles = theme => ({  card: {    minWidth: 350  },  button: {    fontSize: "12px",    margin: theme.spacing.unit,    minWidth: 350  },  extendedIcon: {    marginRight: theme.spacing.unit  },  title: {    fontSize: '20px',    minWidth: 350,    margin: theme.spacing.unit  },});class SelectionPage extends React.Component {  render() {    const { classes } = this.props;    return (      <React.Fragment>        <CssBaseline />        <Grid          container          spacing={0}          direction="column"          alignItems="center"          justify="center"          style={{ minHeight: "100vh" }}        >      

Answer 1

您的组件已导出，default因此您需要以这种方式导入它：

import SelectionPage from './components/SelectionPage'

Answer 2

该SelectionPage组件是default出口，而不是named出口。要解决此问题，请将导入语句更改为此

应用程序.js

import React, { Component } from 'react';

import './App.css';

import SelectionPage from './components/SelectionPage';

.

.

.

希望这可以帮助 ！