ReactJS中div的条件呈现？

Question

我是ReactJS的新手。我想在下面的代码中插入一个条件，以便当noPeopleText.length> 0时，只应该“无人行”div渲染，否则，我不希望这个div渲染到DOM，如果noPeopleText是空的字符串或未定义。

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

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 
}