reactjs - SvgIcon 的 Material-UI 属性“孩子”是“未定义”
问题描述
最近我尝试使用 Material-UI 创建一些内容,但遇到了我找不到任何信息的问题。所以基本上我在使用 SvgIcon 时遇到了这个错误(图标不显示):
Warning: Failed prop type: The prop `children` is marked as required in `SvgIcon`, but its value is `undefined`.
in SvgIcon (created by WithStyles(SvgIcon))
in WithStyles(SvgIcon) (at Navbar.jsx:35)
in span (created by IconButton)
in button (created by ButtonBase)
in ButtonBase (created by WithStyles(ButtonBase))
in WithStyles(ButtonBase) (created by IconButton)
in IconButton (created by WithStyles(IconButton))
in WithStyles(IconButton) (at Navbar.jsx:34)
in div (created by Toolbar)
in Toolbar (created by WithStyles(Toolbar))
in WithStyles(Toolbar) (at Navbar.jsx:33)
in header (created by Paper)
in Paper (created by WithStyles(Paper))
in WithStyles(Paper) (created by AppBar)
in AppBar (created by WithStyles(AppBar))
in WithStyles(AppBar) (at Navbar.jsx:32)
in div (at Navbar.jsx:31)
in Navbar (created by WithStyles(Navbar))
in WithStyles(Navbar) (created by Connect(WithStyles(Navbar)))
in Connect(WithStyles(Navbar)) (at App.jsx:29)
in div (at App.jsx:28)
in App (created by WithStyles(App))
in WithStyles(App) (created by Connect(WithStyles(App)))
in Connect(WithStyles(App)) (at src/index.js:15)
in Provider (at src/index.js:14)
in MuiThemeProvider (at src/index.js:13)
仅当我尝试将代码拆分为较小的组件时才会发生这种情况,下面是此问题发生时间的示例。我可以通过将Navbar.jsx内容移动到App.jsx来修复它,但这不是我想要存档的内容。
应用程序.jsx
class App extends React.Component {
constructor(props) {
super(props);
const {dispatch} = this.props;
history.listen((location, action) => {
dispatch(alertActions.clear())
});
}
render() {
const { alert, authorization } = this.props;
return (
<div id={'someid'}>
<Navbar/>
<div className="col-sm-8 col-sm-offset-2">
{alert.message &&
<div className={`alert ${alert.type}`}>{alert.message}</div>
}
<Router history={history}>
<div>
<PrivateRoute exact path="/" component={HomePage}/>
</div>
</Router>
</div>
</div>
);
}
}
function mapStateToProps(state) {
const {alert, authorization} = state;
return {
alert,
authorization
};
}
const connectedApp = connect(mapStateToProps)(App);
export {connectedApp as App}
导航栏.jsx
class Navbar extends React.Component {
render() {
const { classes, authorization } = this.props;
return (
<div className={classes.root}>
<AppBar position="static">
<Toolbar>
<IconButton className={classes.menuButton} color="inherit" aria-label="Menu">
<MenuIcon/>
</IconButton>
<Typography variant="h6" color="inherit" className={classes.grow}>
{!authorization.loggedIn && <div>not logged</div>}
</Typography>
{!authorization.loggedIn && (<LoginDialog/>)}
{authorization.loggedIn && (<LoggedMenu/>)}
</Toolbar>
</AppBar>
</div>
);
}
}
function mapStateToProps(state) {
const {authorization} = state;
return {
authorization
};
}
const connectedApp = connect(mapStateToProps)(withStyles(styles)(Navbar));
export {connectedApp as Navbar}
我使用material-ui错了吗?:)
解决方案
材质 ui 没有MenuIcon
图标。在此处检查图标https://material.io/tools/icons/?search=menu&style=baseline
您需要导入Menu
图标
或者您导入MenuIcon
组件App
而不导入Navbar
推荐阅读
- ecmascript-6 - ES6 导入多个文件并扩展主对象
- javascript - 使用 javascript 从 url 读取 JSON 数据
- python-2.7 - 如何在 python 脚本中将 sys.path 提供给 docker 文件
- go - 如何处理可以增长而不会阻塞的队列
- laravel - 在 Laravel 通知中使用 $notifiable 中的 Nexmo 自定义配置
- semantic-ui - 如何在 React Semantic UI 中的 Progressbar 上设置自定义文本
- vue.js - Nativescript-vue 在点击事件时显示图像
- android - 如何获取wifi ssid并上传到firebase?
- c - “the” C 标准是否指定编译器必须遵守的标准?
- php - 电子邮件不使用 PHPmail 功能发送