node.js - 为什么会有这种不同的行为？

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/