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

React：将createClass转换为ES6类

2 个答案: