javascript - 使用 ES6 标准写入 "getInitialState"

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 :

Instead of providing a separate getInitialState method, you set up your own state property in the constructor.

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