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

对于简单的条件，您可以使用类似 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 条件三元运算符来 return 一个元素，如果在特定属性处有值（尽管你会想要稍微更健壮的 string/value 检查比那...我只是想保持简短来说明这一点）。

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;

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

React.js way to emulate handlebars condition statements

handlebars.js

reactjs