React.js方式效仿車把條件語句

Question

我已經習慣了使用車把，什麼是一些建議作出反應-Y的方式來模仿這樣的事情（不一定是直接翻譯的，但類似的效果）：

var Beer = React.createClass({ 

    render: function(){ 

    return (

     <div className="media"> 
     <div className="media-body"> 
      {{#if beer.name}}<h4 className="media-heading">{beer.name}</h4>{{/if}} 
      {{#if beer.icon}} <img className="media-object" src={beer.icon} />{{/if}} 
      {{#if beer.style.name}}<p>{beer.style.name} </p>{{/if} 
      etc... 
     </div> 
     </div> 

    ) 
    } 
}); 


module.exports = Beer; 

Answer 1

對於簡單的情況下，你可以使用像this的技術：

var Beer = React.createClass({  
    render: function(){  
    var beer = this.props.beer;   
    return (
     <div> 
     <div> 
      { beer.name ? <h4>{beer.name}</h4> : null } 
      { beer.icon ? <img src={beer.icon} /> : null } 
      { beer.style && beer.style.name ? <p>{ beer.style.name }</p> : null } 
      { beer.style && beer.style.color ? <div>{ beer.style.color }</div> : null } 
     </div> 
     </div>  
    ) 
    } 
}); 

var beer = { 
    name: 'Pale Ale', 
    style: { 
     name: 'Very Very Pale' 
    } 
}; 

React.render(<Beer beer = { beer } />, 
       document.getElementById('content')); 

我只是使用了JavaScript的條件三元運營商是否有在特定的屬性（價值雖然你會想要一個返回元素比這個稍微更健壯的字符串/值檢查...我只是想簡短地說明這一點）。

Answer 2

我的做法略有不同，從WiredPrarie的：

var Beer = React.createClass({ 

     render: function(){ 

     return (

      <div className="media"> 
      <div className="media-body"> 
       { beer.name && <h4 className="media-heading">{beer.name}</h4> } 
       { beer.icon && <img className="media-object" src={beer.icon} /> } 
       { beer.style.name && <p>{beer.style.name} </p> } 
       etc... 
      </div> 
      </div> 

     ) 
     } 
    }); 


    module.exports = Beer;