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

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

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

Answer 2

使用 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 3

如果你喜欢把所有东西都放在行内，你可以这样做：

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 4

如果您的变量为 null 或未定义，那么 React 根本不会渲染它。这意味着您的条件代码可以像这样简单：

var tmpLikeCount;

if(likeCount >= 1){
    tmpLikeCount = likeCount;
}

但我认为您可以使用 class 集使您的代码更简单：

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

如果我们没有明确地 return 来自 getLikeCountCmp 的任何内容，我们最终会得到 undefined，React 将其渲染为空。

请注意，我对您的 like == 1 比较感到有点困惑 - 那应该是 true/false 而不是数字吗？在我的示例中，我假设 this.props.like 为真或为假。这意味着它会被调用：

<LikeCon like={true|false} likeCount={5} />

Answer 5

对我来说看起来不错.. 如果您的问题是将渲染的各个方面提取到一个单独的函数中，则您不必这样做。这也有效：

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

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

How to avoid rendering element as simple as possible

javascript

reactjs

react-jsx