reactjs – 如何在渲染React组件时添加逻辑if语句?
发布时间:2020-12-15 20:51:37 所属栏目:百科 来源:网络整理
导读:如果我有代码看起来像这样… var Lounge = React.createClass({displayName: "Lounge",render: function() { return ( React.createElement("a",{href:"/lounge/detail/" + this.props.id + "/"},React.createElement("div",{className: "lounge"},React.cre
如果我有代码看起来像这样…
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",src: this.props.image}) 如果要检查的值是伪造的,但会导致React呈现的一些东西,就像一个空字符串,您可能希望通过使用!!将它转换为检查中的布尔值. {!!this.props.image && <img className="loungeImage" src={this.props.image}/>} !!this.props.image && React.createElement("img",src: this.props.image}) (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |