ReactJS中div的条件渲染？答案

【问题标题】：Conditional Rendering of div in ReactJS?ReactJS中div的条件渲染？
【发布时间】：2017-04-03 21:18:58
【问题描述】：

我是 ReactJS 的新手。我想在下面的代码中插入一个条件，以便当 noPeopleText.length > 0 时，只应呈现“no-people-row”div，否则，如果 noPeopleText 为空，我不希望此 div 呈现到 DOM字符串或未定义。

为此添加条件的最佳方法是什么？

const peopleMember = (props) => {
    const { people, noPeopleText, title } = props;
    const hasPeople = Boolean(people && people.length);
    const peopleGroup = _.groupBy(people, (person, i) =>
        Math.floor(i / 2)
    );

    return (
    <div>
        { hasPeople &&
            <SectionHeader
                title={title}
            />
        }
        { (hasPeople || noPeopleText) &&
        <div className="c-team-members">
            <div className="container">
                { hasPeople ? _.map(peopleMemberGroups, (members, i) => (
                    <div className="row" key={i}>
                        {members && members.map((member, j) => (
                                <TeamMember
                                    key={j}
                                    name={member.name}
                                />
                            ))
                        }
                    </div>
                )) : //If noPeopleText.length > 0, render div below
                    <div className="row no-people-row">
                        <div className="col-xs-12" dangerouslySetInnerHTML={{__html: noPeopleText}} />
                    </div>
                }
            </div>
        </div>
        }
    </div>

    );
};

【问题讨论】：

标签： reactjs

【解决方案1】：

您的代码中已经有条件渲染。例如：

{ hasPeople &&
    <SectionHeader title={title} />
}

这只会在hasPeople 的计算结果为true 时呈现组件SectionHeader。如果hasPeople 的计算结果为false，那么无论&& 的第二部分如何，整个表达式都将计算为false。因此它永远不会被执行（渲染）。

那么你想要这样的东西吗？

const peopleMember = (props) => {
    const { people, noPeopleText, title } = props;
    const hasPeople = Boolean(people && people.length);
    const peopleGroup = _.groupBy(people, (person, i) =>
        Math.floor(i / 2)
    );

    return (
    <div>
        { hasPeople &&
            <SectionHeader
                title={title}
            />
        }
        { (hasPeople || noPeopleText) &&
        <div className="c-team-members">
            <div className="container">
                { hasPeople ? _.map(peopleMemberGroups, (members, i) => (
                    <div className="row" key={i}>
                        {members && members.map((member, j) => (
                                <TeamMember
                                    key={j}
                                    name={member.name}
                                />
                            ))
                        }
                    </div>
                )) : (noPeopleText.length > 0) &&
                    <div className="row no-people-row">
                        <div className="col-xs-12" dangerouslySetInnerHTML={{__html: noPeopleText}} />
                    </div>
                }
            </div>
        </div>
        }
    </div>

    );
};

【讨论】：

【解决方案2】：

我认为你可以只使用嵌套的三元运算符：

{ hasPeople
    ? //mapping
    : noPeopleText.length > 0
        ? <div className="row no-people-row">
            <div className="col-xs-12" dangerouslySetInnerHTML={{__html: noPeopleText}} />
          </div>
        : null
}

【讨论】：