Question

我试图使用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预设正确设置（通过编译版本1没有问题的证明）。

我错过了什么？为什么我不能在构造函数之外使用箭头函数（或者可能是类中的任何其他＆＃34;常规＆＃34;函数）？

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

Answer 1

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

将handleChange定义为普通方法。

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

在构造函数

中绑定handleChange

constructor() {
    this.handleChange = this.handleChange.bind(this);
}

Answer 2

这是一个名为Class properties transform的ES7第1阶段功能，您可以安装transform-class-properties或使用插件standalone.conf使其正常工作。

Answer 3

如果要使用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"]
    })

Es6 React Arrow函数行为

3 个答案: