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 
}