Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ES7的方式定义React组件报错 #10

Closed
beautycss opened this issue Feb 11, 2018 · 3 comments
Closed

ES7的方式定义React组件报错 #10

beautycss opened this issue Feb 11, 2018 · 3 comments
Labels

Comments

@beautycss
Copy link

beautycss commented Feb 11, 2018

该工程骨架目前使用都正常,但是发现拷antd pro的示例模块过来报错,例如:

class LoginDemo extends React.Component {
  state = {
    notice: '',
    type: 'tab2',
    autoLogin: true,
  }

  onTabChange = (key) => {
    this.setState({
      type: key,
    });
  }

  render() {
    return (
      <Login
        defaultActiveKey={this.state.type}
        onTabChange={this.onTabChange}
      >
          <a style={{ float: 'right' }} href="">注册账户</a>
      </Login>
    );
  }
}

image

image

问题:

  1. 这种定义state的方式报错;
  2. class里使用箭头函数报错;
    可能是目前不支持ES7的方式写React;

尝试了安装babel-preset-stage-0babel-preset-es2017,然后在.babelrc 里的presets 添加stage-0es2017,这样也不行,重启webpack进行编译依然报错。

@beautycss beautycss changed the title 如何支持ES7? ES7的方式定义React组件 报错 Feb 11, 2018
@beautycss beautycss changed the title ES7的方式定义React组件 报错 ES7的方式定义React组件报错 Feb 11, 2018
@hubcarl
Copy link
Collaborator

hubcarl commented Mar 13, 2018

@beautycss 这个好像是 eslint 的错误,可以关掉eslint 试试:

loaders:{
 eslint: false
}

如果OK,再回过头来修复 eslint试试

@xinjingfen
Copy link

我也遇到同样的问题,我的是加载css报的错。
image
我尝试关闭eslint
image
还是报同样的错

@shusc24
Copy link

shusc24 commented May 8, 2018

这事 我加 mobx 时候也是 找了很久 加了
transform-class-properties
transform-decorators-legacy 好像可以 babel 这鬼东西 真头大

{ "presets": [ "react-latest", ["env", { "modules": false }] ], "plugins": [ "transform-decorators-legacy", "react-hot-loader/babel", "transform-object-assign", "syntax-dynamic-import", "transform-object-rest-spread", "transform-class-properties", ["import", { libraryName: "antd", style: "css" }] ], "comments": false }

@hubcarl hubcarl closed this as completed Aug 21, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

4 participants