React:呈现函数中的条件语句
React:呈现函数中的条件语句
提问于 2016-11-30 15:26:09
我有一系列不同艺术家的物品。我希望根据图像是否在单个对象中显示不同的内容。
我试图在render方法中添加一个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>
)
}回答 3
Stack Overflow用户
回答已采纳
发布于 2016-11-30 15:30:29
您可以按照以下内容内联：
{ myVal === true ? <div>True</div> : <div>False</div> }例如，如果您只希望在myVal为真的情况下呈现某项内容，则如果它为false，则可以返回null：
{ myVal === true ? <div>True</div> : null }如果逻辑相当大，只需将其解压缩到函数中，并从您的呈现中调用它：
renderSalutation() {
return (userLoggedOn ? <h3>Hello!</h3> : null);
}
render() {
return (
<div>
{ this.renderSalutation() }
------other renderings here
</div>
);
}Stack Overflow用户
发布于 2016-11-30 15:29:45
您需要在JSX代码中使用有效的表达式。如果-否则语句不是，但是可以使用三元操作符：
var cardList = this.props.artists.map(function(artist, index) {
return(
<li key={index} className='card'>
<span>
{artist.image ? (
<img src="{artist.image}">
) : (
<p>{artist.message}</p>
<p>LIKES <i className="fa fa-heart" aria-hidden="true"></i> {artist.likeCount}</p>
)}
</span>
</li>
)
})您可以找到关于条件呈现在反应文档中的更多信息。
Stack Overflow用户
发布于 2016-11-30 15:40:00
这可以用if/else来完成。如在React站点上所示：
function NumberDescriber(props) {
let description;
if (props.number % 2 == 0) {
description = <strong>even</strong>;
} else {
description = <i>odd</i>;
}
return <div>{props.number} is an {description} number</div>;
}只需在您的渲染功能中执行类似的操作。有条件地将值设置为所需的组件，然后在{}中呈现它。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40892101
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号