ES6標準を使用して「getInitialState」を書き込む

Question

ECMAScript6標準を使用するためにこのコードを更新する際に問題があります。私は普通のjavascriptオブジェクトにgetInitialStateを設定して、それをReact.createClass APIに渡しました。 Reactコンポーネントに推奨されるES6構文を使用するために、以下のスニペットをどのように書き直すことができるかを理解したいと思います。 ES6のクラススタイルで

class App extends React.Component { 
    getInitialState: function() { 
     return { 
      tabList: tabList, 
      currentTab: 1 
     }; 
    } 

    changeTab: function(tab) { 
     this.setState({ currentTab: tab.id }); 
    } 

    render() { 
     return(
      <div> 
       <Tabs currentTab={this.state.currentTab} tabList={this.state.tabList} changeTab={this.changeTab}/> 
       <Content currentTab={this.state.currentTab} /> 
      </div> 
     ); 
    } 
} 

Answer 1

：

class App extends React.Component { 
    constructor(props) { 
    super(props); 

    // Initialise your state here. 
    this.state = { 
     tabList: tabList, 
     currentTab: 1 
    }; 

    // Bind your functions to this, avoiding scoping issues. 
    this.changeTab = this.changeTab.bind(this); 
    } 

    // Use function property syntax 
    changeTab(tab) { 
    this.setState({ 
     currentTab: tab.id 
    }); 
    } 

    render() { 
    // deconstruct your state. 
    const { currentTab, tabList } = this.state; 

    return(
     <div> 
      <Tabs currentTab={currentTab} tabList={tabList} changeTab={this.changeTab}/> 
      <Content currentTab={currentTab} /> 
     </div> 
    ); 
    } 
} 

Answer 2

、あなただけのコンストラクタでthis.stateに初期状態を割り当てる：

constructor(props) { 
    super(props); 
    this.state = { 
     tabList: tabList, 
     currentTab: 1 
    }; 
} 

the docsを参照してください：

代わりに別のgetInitialState方法を提供する、あなたが設定コンストラクタの独自の状態プロパティ

はまたchangeTabwon't be autoboundのようなハンドラ、ES6クラスを使用する場合、ことに注意してくださいので、あなたは、理想的には、コンストラクタ（this.changeTab = this.changeTab.bind(this)）で、明示的にバインドする必要があります。

次の構文を使用することを推奨しES6で