2

我正在尝试使用 Borwserify、Watchify、Babelfiy（带有 ES2015 预设）进入 React。

谁能解释一下，为什么这是有效的......

export default class HelloWorld extends React.Component {

constructor(props) {
    super(props);
    this.state = {
        username: 'Tyler McGinnis'
    }

    this.handleChange = (e) => {
        this.setState({username: e.target.value})
    };


}

render() {

    return (
        <div>
            Hello {this.state.username} <br />
            Change Name: <input type="text" value={this.state.username} onChange={this.handleChange} />
        </div>
    )
}

而这段代码不是（构造函数外的箭头函数）......

export default class HelloWorld extends React.Component {

constructor(props) {
    super(props);
    this.state = {
        username: 'Tyler McGinnis'
    }
}


handleChange = (e) => {
   this.setState({username: e.target.value})
};

render() {

    return (
        <div>
            Hello {this.state.username} <br />
            Change Name: <input type="text" value={this.state.username} onChange={this.handleChange} />
        </div>
    )
}

最后一个给我一个错误，即：

Unexpected token (18:17)

handleChange = ((e) => {
            ^
       this.setState({username: e.target.value})
} );

我在 Internet 上可以找到的所有内容都告诉我，这两种语法都应该可以工作，但它们不能。这发生在正确设置了 ES2015 babel 预设的情况下（通过编译第一版没有问题来证明）。

我错过了什么？为什么我不能在构造函数之外有一个箭头函数（或者可能是类中的任何其他“常规”函数）？

任何帮助将不胜感激！谢谢！

4

3 回答 3

2

在 ES6 / ES2015 中，您不能将箭头函数作为类方法。

将 handleChange 定义为普通方法。

handleChange(e){
   this.setState({username: e.target.value});
}

在构造函数中将handleChange与this绑定

constructor() {
    this.handleChange = this.handleChange.bind(this);
}
于 2016-02-07T20:53:09.307 回答
2

这是一个 ES7 stage-1 功能，称为Class properties transform，您可以安装babel-preset-stage-1或使用插件transform-class-properties来使其工作。

于 2016-05-04T04:40:27.180 回答
0

如果你想使用 ES7 的特性，你需要 babel 插件

transform-class-properties（箭头函数需要这个）

  • 纱线添加 babel-plugin-transform-class-properties --dev
  • 纱线添加 babel-plugin-transform-object-rest-spread --dev

然后你配置webpack 其他类似的东西

.configureBabel(function(babelConfig) {
        babelConfig.plugins = ["transform-object-rest-spread","transform-class-properties"]
    })
于 2018-10-02T05:49:32.137 回答