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

发布时间：2020-12-15 09:31:52 所属栏目：百科来源：网络整理

导读：我习惯使用Handlebars,有些建议使用React-y方法来模拟这样的东西(不一定是直接翻译,但是类似的效果)： var Beer = React.createClass({ render: function(){ return ( div className="media" div className="media-body" {{#if beer.name}}h4 className="med

我习惯使用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;

解决方法

对于简单的条件,您可以使用像 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条件三元运算符返回一个元素,如果在特定属性中有值(虽然你想要一个稍微强一些的字符串/值检查…我只是想保持简短来说明点).

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!