我有一系列不同艺术家创作的物品。我想根据图像是否在单个对象中显示不同的内容。
我试过放一个if/else
在我的渲染方法中声明,但这当然不起作用。请参阅下面我的代码。
render: function() {
var cardList = this.props.artists.map(function(artist, index){
return(
<li key={index} className='card'>
<span>
{if artist.image}
<img src="{artist.image}">
{else}
<p>{artist.message}</p>
<p>LIKES <i className="fa fa-heart" aria-hidden="true"></i> {artist.likeCount }</p>
</span>
</li>
)
})
return (
<div className='tickerwrapper'>
<ul className='list'>{cardList}</ul>
</div>
)
}
您可以按照以下方式内联某些内容:
{ myVal === true ? <div>True</div> : <div>False</div> }
例如,如果您只想渲染某些内容myVal如果为 true,则可以返回 null:
{ myVal === true ? <div>True</div> : null }
如果逻辑非常大,只需将其提取到一个函数中并从渲染中调用它:
renderSalutation() {
return (userLoggedOn ? <h3>Hello!</h3> : null);
}
render() {
return (
<div>
{ this.renderSalutation() }
------other renderings here
</div>
);
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)