這個類聲明中使用的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的形式是什麼？

回答

相關問題