我有一个reactJS组件，看起来像这样：
var LikeCon = React.createClass({
render(){
return this.renderLikeButton(this.props.like, this.props.likeCount)
},
renderLikeButton(like, likeCount){
var content;
var tmpLikeCount;
if(likeCount < 1){
tmpLikeCount = "";
}
else{
tmpLikeCount = likeCount;
}
if(like == 1){
content = <div className="likeButConAct"><div className="likeB"> </div><div className="likeCount">{tmpLikeCount}</div></div>
}
else{
content = <div className="likeButCon"><div className="likeB"> </div><div className="likeCount">{tmpLikeCount}</div></div>
}
return content;
}
});
假设如果没有喜欢，我想隐藏likeCount元素。我如何做到这一点尽可能简单？我不希望其他组件呈现此内容。
如果您的变量为null或未定义，那么React根本不会渲染它。这意味着您的条件代码可以很简单：
var tmpLikeCount;
if(likeCount >= 1){
tmpLikeCount = likeCount;
}
但是我认为您可以使用类集使代码更简单：
http://facebook.github.io/react/docs/class-name-manipulation.html
var LikeCon = React.createClass({
render(){
var likeCountCmp;
var classes = React.addons.classSet({
likeButCon: true,
active: this.props.like
});
if(this.props.likeCount > 0) {
likeCountCmp = <div className="likeCount">{this.props.likeCount}</div>;
}
return (
<div className={classes}>
<div className="likeB"> </div>
{likeCountCmp}
</div>
)
}
});
我认为可行的最后一种变体是使用隐式函数返回：
var LikeCon = React.createClass({
render(){
var classes = React.addons.classSet({
likeButCon: true,
active: this.props.like
});
return (
<div className={classes}>
<div className="likeB"> </div>
{this.getLikeCountCmp()}
</div>
)
},
getLikeCountCmp: function() {
if(this.props.likeCount > 0) {
return <div className="likeCount">{this.props.likeCount}</div>;
}
}
});
如果我们没有从专门返回任何内容getLikeCountCmp，我们将最终得到undefined，React将其呈现为空。
请注意，我对您的like == 1比较有点困惑-应该是真/假而不是数字吗？this.props.like在我的示例中，我假设是对还是错。这意味着可以通过以下方式调用它：
<LikeCon like={true|false} likeCount={5} />
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句