React.js模拟把手条件语句的方法

Question

我习惯使用Handlebars,有些建议使用React-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

我的方法与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;