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

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>
        )
    }
});

我认为可行的最后一个变体是使用隐式函数返回:

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} />