Question

我有一个如下所示的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">&nbsp;</div><div className="likeCount">{tmpLikeCount}</div></div>
        }
        else{
            content = <div className="likeButCon"><div className="likeB">&nbsp;</div><div className="likeCount">{tmpLikeCount}</div></div>
        }
        return content;
    }
});

如果没有喜欢，我想隐藏likeCount元素。我该如何做到尽可能简单？我不想要另一个组件来渲染它。

Answer 1

如果您的变量为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">&nbsp;</div>
                {likeCountCmp}
            </div>
        )
    }
});

我认为最终的变体是使用隐式函数return：

var LikeCon = React.createClass({
    render(){
        var classes = React.addons.classSet({
            likeButCon: true,
            active: this.props.like
        });

        return (
            <div className={classes}>
                <div className="likeB">&nbsp;</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} />

Answer 2

如果您想将所有内容放入内联，则可以执行以下操作：

renderLikeButton(like, likeCount){
    return (<div className={like==1 ? "likeButConAct" : "likeButCon" }>
                <div className="likeB">&nbsp;</div>
                { likeCount > 0 ? <div className="likeCount">{likeCount}</div>: null }
            </div>);
}

如果.likeCount为0，那么你就不会渲染likeCount div。

jsFiddle：http://jsfiddle.net/715u9uvb/

Answer 3

使用className隐藏元素怎么样？

类似的东西：

var cssClasses = "likeButConAct ";

if ( likeCount < 1 ) {
   cssClasses += "hidden";
}
...
return <div className=cssClasses><div ...

编辑

    var content;
    var tmpLikeCount;
    var likeCounterComponent;

      if(likeCount > 0){
       likeCounterComponent = <div className="likeCount">{likeCount}</div>
    }


    if(like == 1){
       cssClasses = "likeButConAct"
    }
    else{
      cssClasses = "likeButCon";
    }

    return (
       <div className=cssClasses>
         <div className="likeB">&nbsp;</div>
           { likeCounterComponent }
          </div>);

只有喜欢的时候才能添加likeCounter。如果有像likeCounterComponent包含JSX代码来渲染喜欢计数器，否则是未定义的，因此不会呈现任何内容。

我还没有尝试过运行代码，但我猜你有想法解决这个问题。：D

Answer 4

Colin's answer对我来说很好..如果你的问题是将渲染的各个方面提取到一个单独的函数，你就不必这样做了。这也有效：

return ( <div className={classes}> <div className="likeB"> </div> {this.props.likeCount > 0 && ( <div className="likeCount">{this.props.likeCount}</div> )}; </div> )

Answer 5

....
if (likeCount < 1) {
    return "";
}
....

如何避免渲染元素尽可能简单

5 个答案: