嘗試導入錯誤：“SelectionPage”未從“./components/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" }}
        >
          <Card className={classes.card}>
            <Typography align="center" className={classes.title}>
              Select the option
            </Typography>
            <CardContent>
              <Grid item xs={3}>
                <Button
                  variant="contained"
                  size="medium"
                  color="primary"
                  className={classes.button}
                  value="1"
                  onClick={this.props.clickBtn}
                >
                  Option 1
                </Button>
              </Grid>
              <Grid item xs={3}>
                <Button
                  variant="contained"
                  size="medium"
                  color="primary"
                  className={classes.button}
                  value="2"
                  onClick={this.props.clickBtn}
                >
                  Option 2
                </Button>
              </Grid>
            </CardContent>
          </Card>
        </Grid>
      </React.Fragment>
    );
  }
}

export default withStyles(styles)(SelectionPage);

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';

.
.
.

希望這可以幫助 ！