Question

我是ReactJS的新手。我想在下面的代码中插入一个条件，以便当noPeopleText.length＆gt; 0，那么只有＆＃34; no-people-row＆＃34; 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>

    );
};

Answer 1

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

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

如果SectionHeader评估为hasPeople，则只会呈现组件true。如果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>

    );
};

Answer 2

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

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

ReactJS中div的条件渲染？

2 个答案: