这个类声明中使用的Javascript的形式是什么？

这是从table example从阵营工具箱（可以使用标签）这个类声明中使用的Javascript的形式是什么？

class TableTest extends React.Component { 
    state = { selected: [], source: users }; 

    handleSelect = (selected) => { 
    this.setState({selected}); 
    }; 

    render() { 
    return (
     <Table 
     model={UserModel} 
     onSelect={this.handleSelect} 
     selectable 
     multiSelectable 
     selected={this.state.selected} 
     source={this.state.source} 
     /> 
    ); 
    } 
}

这不会的WebPack /巴贝尔编译我，但下面的“正确”的JavaScript并。这是JSX符号和一个标志，我没有像我想的那样对JSX进行转译？

class TableTest extends React.Component { 
    constructor() { 
    super(); 
    this.state = { selected: [], source: users }; 

    this.handleSelect = (selected) => { 
     this.setState({selected}); 
    }; 
    } 

    render() { 
    return (
     <Table 
     model={UserModel} 
     onSelect={this.handleSelect} 
     selectable 
     multiSelectable 
     selected={this.state.selected} 
     source={this.state.source} /> 
    ); 
    } 
}

的WebPack /通天扼流圈：

ERROR in ./src/client/app/app.jsx 
Module build failed: SyntaxError: Unexpected token (21:8) 

    19 | 
    20 | class TableTest extends React.Component { 
> 21 | state = { selected: [], source: users };

来源

2016-09-22 bp.

这是使用class properties，这是目前通天的stage 2 preset的一部分。

对于此代码，类主体中的=语句将通过类属性转换移入构造函数。

Here's the original code in the Babel REPL with suitable presets applied。

您将需要添加此预设（或更低阶段预设，因为所有Babel舞台预设还包括更高阶段的功能）到您的Babel配置，或单独添加转换插件到它。

例通天配置这将提供所有的功能，你需要transpile原代码：

{ 
    presets: ['es2015', 'react', 'stage-2'] 
}

来源

2016-09-22 08:27:50

感谢。我需要安装一个舞台预设（阶段0似乎标准，但我不知道为什么，我认为这是危险的），并将其添加到.babelrc。 –

@bp .:舞台预设对应于[提出新的JS语言特性的过程中的不同阶段]（https://github.com/tc39/proposals）。第0阶段是全新的想法，第4阶段的功能肯定会包含在下一个JavaScript版本中。很显然，很多早期的提案会被抛弃或拒绝，所以这是一种折衷 - 如果你处于第0阶段的预设，你会得到*所有的东西*，但有可能最终导致某些功能非标准的将来。 –

-1

它在=声明投掷类的内部错误。由于React没有自动绑定规则，您需要将this绑定到handleSelect。

https://facebook.github.io/react/docs/reusable-components.html#no-autobinding

class TableTest extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
     selected: [], source: users 
     }; 
     this.handleSelect = this.handleSelect.bind(this); 
    } 

    handleSelect(selected) { 
    this.setState({selected}); 
    } 

    render() { 
    return (
     <Table 
     model={UserModel} 
     onSelect={this.handleSelect} 
     selectable 
     multiSelectable 
     selected={this.state.selected} 
     source={this.state.source} 
     /> 
    ); 
    } 
}

来源

2016-09-22 08:29:17 Lottamus

chill @Quill我添加了一个 – Lottamus

我的问题是关于为什么第一个例子不起作用以及它实际上是什么表示法。我可以使用下面的正确示例来使它工作，但我想了解发生了什么问题。 –

@bp es6组件中不再有自动绑定。如果你想将“this”绑定到该函数，你需要在constructer中这样做 – Lottamus

这个类声明中使用的Javascript的形式是什么？

回答

相关问题