Question

下面，调用things()并不会呈现任何内容。如果我注释掉thing()，并取消注释下面的代码（在语义上与函数thing()相同，就在那里），我会看到正在显示的行。

为什么行为不同？

function things(){
    return (           
            <tbody> 
            <tr>
                <td><button type="button" className="btn btn-default btn-sm" onClick={this.unwatch}>
                <span className="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span>
                </button></td>
                <td>{}</td>
                <td>{}</td>
                <td>{}</td>
                <td>{}</td>
                <td>{}</td>
                <td>{}</td>
                <td>{}</td>
                <td>{}</td>
                <td>{}</td>
                <td>{this.props.stock.symbol}</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>
                <td>{}</td>
                <td>{}</td>
                <td>{}</td>
                <td>{}</td>
                <td>{}</td>
                <td>{}</td>
                <td>{}</td>
                <td>{}</td>
                <td>{}</td>
                <td>{}</td>
            </tr> 
            </tbody>                    
        );        
}

var StockRow = React.createClass({
    unwatch: function() {
        this.props.unwatchStockHandler(this.props.stock.symbol);
    },
    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';
        }

        things(); //  this doesn't work. Uncomment below does work.Why?

        /*
        return (           
            <tbody> 
            <tr>
                <td><button type="button" className="btn btn-default btn-sm" onClick={this.unwatch}>
                <span className="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span>
                </button></td>
                <td>{}</td>
                <td>{}</td>
                <td>{}</td>
                <td>{}</td>
                <td>{}</td>
                <td>{}</td>
                <td>{}</td>
                <td>{}</td>
                <td>{}</td>
                <td>{this.props.stock.symbol}</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>
                <td>{}</td>
                <td>{}</td>
                <td>{}</td>
                <td>{}</td>
                <td>{}</td>
                <td>{}</td>
                <td>{}</td>
                <td>{}</td>
                <td>{}</td>
                <td>{}</td>
            </tr> 
            </tbody>                    
        );   
        */     
    }
});

Answer 1

把东西放在类中并像这样使用它： return <div>{this.things()}</div>它会起作用。

检查此工作fiddle：https://jsfiddle.net/455184rh/

Answer 2

不使用只会在那里抛出数据的things()，而是使用return things（）来返回类中的数据。

return (things());

为什么这种行为不同？

2 个答案: