React添加Material-UI Dialog组件后编译失败求助

嘿，我来帮你搞定这个问题！你遇到的Unexpected token错误，根源是**类字段语法（Class Fields）**没有被Babel正确转译。你在SimpleDialog类里写的handleClose = () => {}这种箭头函数作为类实例方法的写法，属于ES提案阶段的特性，不是标准ES6语法，默认Babel不会处理它，所以webpack编译时就抛出了语法错误。

具体解决办法有两种，你可以选适合自己的： #

方案一：配置Babel支持类字段语法 #

1. 安装必要的Babel插件
   如果你用的是Babel 7及以上版本，打开终端运行：

   npm install --save-dev @babel/plugin-proposal-class-properties
   

   要是还在使用Babel 6，就装这个：

   npm install --save-dev babel-plugin-transform-class-properties
   

2. 修改Babel配置文件
   在项目根目录找.babelrc文件（没有的话新建一个），添加插件配置：

   • 对于Babel 7+：

     {
       "presets": ["react", "@babel/preset-env"],
       "plugins": ["@babel/plugin-proposal-class-properties"]
     }
     

   • 对于Babel 6：

     {
       "presets": ["react", "env"],
       "plugins": ["transform-class-properties"]
     }
     

方案二：改用传统类方法+绑定this #

如果你暂时不想调整Babel配置，也可以把类里的箭头函数改成普通类方法，然后在构造函数里手动绑定this：

修改SimpleDialog类：

class SimpleDialog extends React.Component {
  constructor(props) {
    super(props);
    // 手动绑定this到方法，避免回调时this指向丢失
    this.handleClose = this.handleClose.bind(this);
    this.handleListItemClick = this.handleListItemClick.bind(this);
  }

  handleClose() {
    this.props.onClose(this.props.selectedValue);
  };

  handleListItemClick(value) {
    this.props.onClose(value);
  };

  // 剩下的render代码保持不变
}

同样的，SimpleDialogDemo里的方法也要做类似修改：

class SimpleDialogDemo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false,
      selectedValue: emails[1],
    };
    this.handleClickOpen = this.handleClickOpen.bind(this);
    this.handleClose = this.handleClose.bind(this);
  }

  handleClickOpen() {
    this.setState({ open: true });
  };

  handleClose(value) {
    this.setState({ selectedValue: value, open: false });
  };

  // 剩下的render代码保持不变
}

为什么有时候加TextField能正常运行？ #

这是因为TextField组件的代码没有使用类字段语法，编译时不会触发这个语法错误，但你的Dialog组件里用了，所以只要Dialog组件存在就会报错，和TextField无关哦～

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