Material UI Button组件children必填错误排查与代码修正咨询

错误含义解析 #

这个错误的意思很直白：你正在使用的Material UI Button组件要求children属性是必填项（官方文档里标了*），它用来定义按钮显示的内容（文字、图标都算）。但你的代码里没有给Button传入任何子元素，导致children的值是undefined，触发了组件的必填校验规则，所以抛出了这个提示。

代码调整方案 #

你原来的代码用了label属性来设置按钮文字，但在你迁移的这个版本的Material UI里，Button已经不再支持label这个属性了，取而代之的是通过children来传递按钮内容。只需要把label属性去掉，把按钮文字放到Button标签的内部作为子元素就行：

<Button variant="raised" color="primary" className={classes.Button} onClick={this.handleClick}>
  {this.state.buttonLabel}
</Button>

如果之后需要给按钮加图标之类的元素，也直接把它们放在Button标签里就行，比如：

<Button variant="raised" color="primary" className={classes.Button} onClick={this.handleClick}>
  <SaveIcon /> {/* 假设你引入了SaveIcon组件 */}
  {this.state.buttonLabel}
</Button>

这样就能满足children必填的要求，错误也就消失啦～

内容的提问来源于stack exchange，提问作者Axwack