Question

我无法更新此代码以使用ECMAScript6标准。我曾经在普通的javascript对象上设置getInitialState并将其传递给React.createClass API。我想了解如何重写下面的代码段，以便为React组件使用推荐的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

在ES6类样式中，您只需在构造函数中将初始状态指定给this.state：

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

请参阅the docs：

您可以在构造函数中设置自己的state属性，而不是提供单独的getInitialState方法。

另请注意，在使用ES6类时，处理程序如changeTab won't be autobound，因此您需要显式绑定它们，理想情况是在构造函数（this.changeTab = this.changeTab.bind(this)）中。

Answer 2

在ES6中，建议使用以下语法：

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>
    );
  }
}

使用ES6标准编写“getInitialState”

2 个答案: