爲什麼這是不同的行爲？

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());