Reactjs 物料UI v1-SwipeableDrawer:元素类型无效
我已经实现了一个,我收到了一个臭名昭著的错误: × 我想我已经设置了所有必要的道具。下面是实现Reactjs 物料UI v1-SwipeableDrawer:元素类型无效,reactjs,material-ui,Reactjs,Material Ui,我已经实现了一个,我收到了一个臭名昭著的错误: × 我想我已经设置了所有必要的道具。下面是实现 import React from 'react' import PropTypes from 'prop-types' import { withStyles } from '@material-ui/core/styles' import SwipeableDrawer from '@material-ui/core/SwipeableDrawer' import IconButton from
import React from 'react'
import PropTypes from 'prop-types'
import { withStyles } from '@material-ui/core/styles'
import SwipeableDrawer from '@material-ui/core/SwipeableDrawer'
import IconButton from '@material-ui/core/IconButton'
import MenuIcon from '@material-ui/icons/Menu'
import List from '@material-ui/core/List'
import Divider from '@material-ui/core/Divider'
import { drawerListItems } from './DrawerListItems'
const styles = {
list: {
width: 250,
},
fullList: {
width: 'auto',
},
};
class SwipeableTemporaryDrawer extends React.Component {
state = {
left: false,
};
toggleDrawer = (open) => () => {
this.setState({
left: open
});
};
render() {
const { classes } = this.props;
const sideList = (
<div className={classes.list}>
<List>{drawerListItems}</List>
<Divider />
<List>{drawerListItems}</List>
</div>
);
return (
<div>
<IconButton className={classes.menuButton} color="inherit" onClick={this.toggleDrawer(true)}>
<MenuIcon />
</IconButton>
<SwipeableDrawer
open={this.state.left}
onClose={this.toggleDrawer(false)}
onOpen={this.toggleDrawer(true)}
>
<div
tabIndex={0}
role="button"
onClick={this.toggleDrawer( false)}
onKeyDown={this.toggleDrawer(false)}
>
{sideList}
</div>
</SwipeableDrawer>
</div>
);
}
}
SwipeableTemporaryDrawer.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(SwipeableTemporaryDrawer);
有人能发现这个错误吗
提前谢谢 在我的例子中,我从
@material ui/core/AppBar'
导入了{AppBar}
,但失败了,删除{}
为我修复了它,如下所示:
抽屉里的文件是什么?我猜要么你忘了导出抽屉里的文件,要么它应该从导入{drawerlitiems}。/drawerlitiems'而不是从导入{drawerlitiems}。/drawerlitiems'@OrkunOzen,你能展示你的
包.json
吗?更新了!谢谢你的帮助!
import React from 'react'
import PropTypes from 'prop-types'
import { withStyles } from '@material-ui/core/styles'
import SwipeableDrawer from '@material-ui/core/SwipeableDrawer'
import IconButton from '@material-ui/core/IconButton'
import MenuIcon from '@material-ui/icons/Menu'
import List from '@material-ui/core/List'
import Divider from '@material-ui/core/Divider'
import { drawerListItems } from './DrawerListItems'
const styles = {
list: {
width: 250,
},
fullList: {
width: 'auto',
},
};
class SwipeableTemporaryDrawer extends React.Component {
state = {
left: false,
};
toggleDrawer = (open) => () => {
this.setState({
left: open
});
};
render() {
const { classes } = this.props;
const sideList = (
<div className={classes.list}>
<List>{drawerListItems}</List>
<Divider />
<List>{drawerListItems}</List>
</div>
);
return (
<div>
<IconButton className={classes.menuButton} color="inherit" onClick={this.toggleDrawer(true)}>
<MenuIcon />
</IconButton>
<SwipeableDrawer
open={this.state.left}
onClose={this.toggleDrawer(false)}
onOpen={this.toggleDrawer(true)}
>
<div
tabIndex={0}
role="button"
onClick={this.toggleDrawer( false)}
onKeyDown={this.toggleDrawer(false)}
>
{sideList}
</div>
</SwipeableDrawer>
</div>
);
}
}
SwipeableTemporaryDrawer.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(SwipeableTemporaryDrawer);
import React from 'react';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import InboxIcon from '@material-ui/icons/MoveToInbox';
import DraftsIcon from '@material-ui/icons/Drafts';
import StarIcon from '@material-ui/icons/Star';
import SendIcon from '@material-ui/icons/Send';
export const DrawerListItems = (
<div>
<ListItem button>
<ListItemIcon>
<InboxIcon />
</ListItemIcon>
<ListItemText primary="Inbox" />
</ListItem>
<ListItem button>
<ListItemIcon>
<StarIcon />
</ListItemIcon>
<ListItemText primary="Starred" />
</ListItem>
<ListItem button>
<ListItemIcon>
<SendIcon />
</ListItemIcon>
<ListItemText primary="Send mail" />
</ListItem>
<ListItem button>
<ListItemIcon>
<DraftsIcon />
</ListItemIcon>
<ListItemText primary="Drafts" />
</ListItem>
</div>
);
{
"name": "find-swim",
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/codemod": "^1.1.0",
"@material-ui/core": "^1.2.0",
"@material-ui/icons": "^1.1.0",
"firebase": "^4.8.0",
"material-ui": "^0.19.4",
"material-ui-autocomplete-google-places": "^2.2.0",
"material-ui-places": "^1.1.7",
"mui-places-autocomplete": "^2.0.0",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-ga": "^2.4.1",
"react-google-button": "^0.4.0",
"react-google-maps": "^9.2.2",
"react-places-autocomplete": "^5.4.3",
"react-redux": "^5.0.6",
"react-redux-firebase": "^2.0.0-beta.16",
"react-redux-form": "^1.16.5",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-scripts": "^1.0.16",
"react-tap-event-plugin": "^3.0.2",
"recompose": "^0.26.0",
"redux": "^3.7.2",
"redux-devtools": "^3.4.0",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.2.0"
},
"scripts": {
"start": "react-scripts start",
"build": "set GENERATE_SOURCEMAP=false && react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"deploy": "firebase deploy"
},
"devDependencies": {
"redux-devtools-extension": "^2.13.2"
}
}