javascript - 尝试导入错误:“SelectionPage”未从“./components/SelectionPage”导出
问题描述
我正在实现选择页面,用户可以在其中单击按钮 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);
解决方案
您的组件已导出,default
因此您需要以这种方式导入它:
import SelectionPage from './components/SelectionPage'
推荐阅读
- php - 使用 PHP 响应 mySQL 计数
- java - 在给我 NoSuchElementException 的开关的情况 2 中,我遇到了问题?
- amazon-web-services - SAM 模板:Cognito 用户池集成在 APIgateway 中 - 授权方不起作用
- javascript - 通过jquery从javascript中的html字符串获取特定的id值
- predict - Tensorflow Estimator.predict() 失败
- azure-ad-b2c - Azure B2C - PublicClientApplication.AcquireTokenByUsernamePasswordAsync 失败
- anylogic - 我应该如何实现功能来选择我想要的路线?
- excel - 如何修改超链接中的变量?
- c# - 如何将 C# 日期时间值转换为 UTC 时区
- ios - 任务切换器和消息警报中的 ApplicationWillResignActive