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

Question

我正在实现选择页面，用户可以在其中单击按钮 1 或 2。单击按钮后，用户将被重定向到相应的页面。为了简化测试，我只SelectionPage在所有选项中使用。

问题是我得到了错误：

Failed to compile

./src/App.js

Attempted 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&nbsp;SelectionPage&nbsp;from&nbsp;'./components/SelectionPage'

Answer 2

该SelectionPage组件是default出口，而不是named出口。要解决此问题，请将导入语句更改为此应用程序.jsimport React, { Component } from 'react';import './App.css';import SelectionPage from './components/SelectionPage';...希望这可以帮助 ！