Bedingtes Rendern von div in ReactJS?

Question

Ich bin ein Neuling zu ReactJS. Ich möchte eine Bedingung in meinem Code einfügen, so dass, wenn noPeopleText.length> 0, dann nur die "no-people-row" div rendern sollte, andernfalls möchte ich nicht diese Div-Rendering für das DOM, wenn noPeopleText leer ist Zeichenfolge oder nicht definiert.

Was ist der beste Weg, um eine bedingte hinzufügen?

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

Sie haben bereits bedingten Rendering in Ihrem Code. Zum Beispiel:

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

Dies wird die Komponente SectionHeader nur machen, wenn hasPeople zu true auswertet. Wenn hasPeople zu false auswertet, würde der gesamte Ausdruck false ungeachtet des zweiten Teils der && auswerten. Daher wird es nie ausgeführt (gerendert).

Wollen Sie so etwas?

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

Ich glaube, Sie nur einen verschachtelten ternären Operator verwenden:

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