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导出。要解决此问题，请将import语句更改为此

App.js

import React, { Component } from 'react';
import './App.css';

import SelectionPage from './components/SelectionPage';

.
.
.

希望这会有所帮助！

尝试导入错误：未从“ ./components/SelectionPage”导出“ SelectionPage”

2 个答案: