Question

所以我刚刚尝试获取谷歌资料对话框。我对流星很新，反应如此，对我来说，answare对你来说可能更明显。

即便如此，我的控制台也给了我这个错误：

Missing class properties
   transform.

在此文件的第16行：

export default class DialogExampleCustomWidth extends React.Component {

  state = {
    open: false,
  };

  handleOpen = () => {
    this.setState({open: true});
  };

  handleClose = () => {
    this.setState({open: false});
  };

  render() {
    const actions = [
      <FlatButton
        label="Cancel"
        primary={true}
        onTouchTap={this.handleClose}
      />,
      <FlatButton
        label="Submit"
        primary={true}
        onTouchTap={this.handleClose}
      />,
    ];

    return (
      <div>
        <RaisedButton label="Dialog With Custom Width" onTouchTap={this.handleOpen} />
        <Dialog
          title="Dialog With Custom Width"
          actions={actions}
          modal={true}
          contentStyle={customContentStyle}
          open={this.state.open}
        >
          This dialog spans the entire width of the screen.
        </Dialog>
      </div>
    );
  }
}

错误出现在state = {上我已阅读过多篇文章，但似乎无法理解。感谢您的帮助和时间

Answer 1

默认情况下，Meteor不支持箭头功能，但今天你只需改变它：

add the following package:

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

在项目中编辑package.json，并在其中添加以下内容以生成the package work:

 "babel": {
    "plugins": ["transform-class-properties"]

  }

Answer 2

更改您的代码：

export default class DialogExampleCustomWidth extends React.Component {

  consructor(props){
    super(props);
    this.state = {
      open: false,
  };

  handleOpen = () => {
    this.setState({open: true});
  };

  ......
}

Answer 3

如果要设置初始状态值，应在构造函数中设置。

一个例子是：

constructor(props) {
    super(props)
    this.state = {
        open: false
    }
}

这里要指出两件事：

如果使用构造函数
如果您希望能够在构造函数中访问 this.props ，则将props传递给基类。在这种情况下，super（）会这样做，因为你没有访问this.props。

了解更多here和here（直接来自React团队）

缺少类属性转换

3 个答案: