React：將createClass轉換為ES6類

Question

我想將帶有createClass的代碼轉換為ES6類。 使用getInitialState函數的類時遇到麻煩。

以下是我要轉換的代碼：

var StockRow = React.createClass({
    render: function () {
        var lastClass = '',
            changeClass = 'change-positive',
            iconClass = 'glyphicon glyphicon-triangle-top';
        if (this.props.stock === this.props.last) {
            lastClass = this.props.stock.change < 0 ? 'last-negative' : 'last-positive';
        }
        if (this.props.stock.change < 0) {
            changeClass = 'change-negative';
            iconClass = 'glyphicon glyphicon-triangle-bottom';
        }
        return (
            <tr>
                <td>{this.props.stock.symbol}</td>
                <td>{this.props.stock.open}</td>
                <td className={lastClass}>{this.props.stock.last}</td>
                <td className={changeClass}>{this.props.stock.change} <span className={iconClass} aria-hidden="true"></span></td>
                <td>{this.props.stock.high}</td>
                <td>{this.props.stock.low}</td>              
            </tr>
        );
    }
});

var StockTable = React.createClass({
    render: function () {
        var items = [];
        for (var symbol in this.props.stocks) {
            var stock = this.props.stocks[symbol];
            items.push(<StockRow key={stock.symbol} stock={stock} last={this.props.last} />);
        }
        return (
            <div className="row">
            <table className="table-hover">
                <thead>
                    <tr>
                        <th>Symbol</th>
                        <th>Open</th>
                        <th>Last</th>
                        <th>Change</th>
                        <th>High</th>
                        <th>Low</th>
                    </tr>
                </thead>
                <tbody>
                    {items}
                </tbody>
            </table>
            </div>
        );
    }
});

var HomePage = React.createClass({
    getInitialState: function() {
        var stocks = {};
        feed.watch(['MCD', 'BA', 'BAC', 'LLY', 'GM', 'GE', 'UAL', 'WMT', 'AAL', 'JPM']);
        feed.onChange(function(stock) {
            stocks[stock.symbol] = stock;
            this.setState({stocks: stocks, last: stock});
        }.bind(this));
        return {stocks: stocks};
    },
    render: function () {
        return (
            <div>
                <StockTable stocks={this.state.stocks} last={this.state.last}/>
            </div>
        );
    }
});

這是前兩個方面的功能：

class StockRow extends React.Component{
    constructor(props, context) {
        super(props, context);
    }
    render: function () {
        var lastClass = '',
            changeClass = 'change-positive',
            iconClass = 'glyphicon glyphicon-triangle-top';
        if (this.props.stock === this.props.last) {
            lastClass = this.props.stock.change < 0 ? 'last-negative' : 'last-positive';
        }
        if (this.props.stock.change < 0) {
            changeClass = 'change-negative';
            iconClass = 'glyphicon glyphicon-triangle-bottom';
        }
        return (
            <tr>
                <td>{this.props.stock.symbol}</td>
                <td>{this.props.stock.open}</td>
                <td className={lastClass}>{this.props.stock.last}</td>
                <td className={changeClass}>{this.props.stock.change} <span className={iconClass} aria-hidden="true"></span></td>
                <td>{this.props.stock.high}</td>
                <td>{this.props.stock.low}</td>              
            </tr>
        );
    }
}

class StockTable extends React.Component{
    constructor(props, context) {
        super(props, context);
    }
    render: function () {
        var items = [];
        for (var symbol in this.props.stocks) {
            var stock = this.props.stocks[symbol];
            items.push(<StockRow key={stock.symbol} stock={stock} last={this.props.last} />);
        }
        return (
            <div className="row">
            <table className="table-hover">
                <thead>
                    <tr>
                        <th>Symbol</th>
                        <th>Open</th>
                        <th>Last</th>
                        <th>Change</th>
                        <th>High</th>
                        <th>Low</th>
                    </tr>
                </thead>
                <tbody>
                    {items}
                </tbody>
            </table>
            </div>
        );
    }
}

但是，我不確定如何處理最終類，尤其是關於getInitialState函數。

任何幫助，將不勝感激！

編輯：

這是我上第三堂課的東西：

class HomePage extends React.Component{
    constructor(props, context) {
        super(props, context);
        this.state = {
            stocks = {}
        }

    }
    getData() {
        var stocks = {};
        feed.watch(['MCD', 'BA', 'BAC', 'LLY', 'GM', 'GE', 'UAL', 'WMT', 'AAL', 'JPM']);
        feed.onChange(function(stock) {
            stocks[stock.symbol] = stock;
            this.setState({stocks: stocks, last: stock});
        }.bind(this));
        return {stocks: stocks};
    }
    componentDidMount() {
        this.getData();
    }
    render: function () {
        return (
            <div>
                <StockTable stocks={this.state.stocks} last={this.state.last}/>
            </div>
        );
    }
}

Answer 1

您必須通過在構造函數中初始化狀態變量來替換getInitialState。

constructor(props, context) {
    super(props, context);
    state = {stocks}
}

如果必須獲取一些值以正確初始化狀態，則可以在componentDidMount方法中進行操作

componentDidMount() {
    fetchInfos().then( infos => this.setState({...infos}) );
}

Answer 2

您無法在構造函數中使用stocks ，因為您尚無權使用它（除非您通過props傳遞初始值）。 您可以初始化它，並在以后更新狀態，例如在componentDidMount() ：

constructor(props) {
  super(props)
  this.state = {
    stocks = {}
  }
}

componentDidMount() {
  // fetch stocks and this.setState({ stocks })
}