Es6 反应箭头函数行为

Es6 React Arrow function behaviour

本文关键字：函数 Es6      更新时间：2023-09-26

我正在尝试使用 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})
} );

我在互联网上能找到的所有内容都告诉我，这两种语法都应该有效，但它们没有。 ES2015 babel 预设设置正确时会发生这种情况（通过编译版本一进行证明而没有问题）。

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

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

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

将句柄更改定义为常规方法。

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

绑定句柄在构造函数中与此更改

constructor() {
    this.handleChange = this.handleChange.bind(this);
}
这是一个

名为类属性转换的 ES7 阶段 1 功能，您可以安装babel-preset-stage-1或使用插件transform-class-properties使其工作。

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

转换类属性（箭头函数需要这个）

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

然后你配置了像这样的其他东西

.configureBabel(function(babelConfig) {
        babelConfig.plugins = ["transform-object-rest-spread","transform-class-properties"]
    })
相关文章：