reactjs – 如何在渲染React组件时添加逻辑if语句?

如果我有代码看起来像这样…

var Lounge = React.createClass({displayName: "Lounge",
  render: function() {
    return (
            React.createElement("a", {href:"/lounge/detail/" + this.props.id +  "/"},
            React.createElement("div", {className: "lounge"},
            React.createElement("h2", {className: "loungeAuthor"},
              this.props.author.name
            ),
            React.createElement("p", {className: "loungeArticle"},
              this.props.article
            ),
            React.createElement("img", {className: "loungeImage", src: this.props.image})
          )
        )
    );
  }
});

如果图像数据存在,我需要做一个逻辑,如果检查只渲染“img”组件.有人知道使用React的最佳方法吗?

如果你想这样做,你可以做:

{this.props.image && <img className="loungeImage" src={this.props.image}/>}

this.props.image && React.createElement("img", {className: "loungeImage", src: this.props.image})

如果要检查的值是伪造的,但会导致React呈现的一些东西,就像一个空字符串,您可能希望通过使用!!将它转换为检查中的布尔值.

{!!this.props.image && <img className="loungeImage" src={this.props.image}/>}

!!this.props.image && React.createElement("img", {className: "loungeImage", src: this.props.image})
相关文章
相关标签/搜索