Синтаксис ReactJS для if else с функцией отображения в ветке

Question

Я новичок в реактиве и борется с синтаксисом. У меня этот блок как div внутри моей функции рендеринга. Каждое изменение, которое я делаю, происходит от одной синтаксической ошибки или просто не работает.

<div className="skillSection"> 
{   
    if (this.state.challengeChoices.length < 0) {        
     this.state.challengeChoices.map((para2, i) => 
      <ChallengeSkill key={i} {...para2} callback={this.madeSelection} />) 
    } 
    else { 
     return <div>Hello world</div> 
    } 
} 
</div> 

Answer 1

Рекомендуют сделать функцию:

renderSkillSection: function(){ 
    if (this.state.challengeChoices.length < 0) {        
     return this.state.challengeChoices.map((para2, i) => 
      <ChallengeSkill key={i} {...para2} callback={this.madeSelection} />) 
    } 
    else { 
     return <div>Hello world</div> 
    } 
}, 

render: function(){ 
    return (<div className="skillSection"> 
    {this.renderSkillSection()} 
    </div>) 
} 

Answer 2

JSX не поддерживает conditional statement, но он поддерживает ternary operator, так что вы можете сделать это следующим образом:

<div className="skillSection"> 
{ this.state.challengeChoices.length < 0 ? (        
    this.state.challengeChoices.map((para2, i) => 
     <ChallengeSkill key={i} {...para2} callback={this.madeSelection} />)) : (<div>Hello world</div>) 
} 
</div> 

Answer 3

Мне нравится следующая когда это всего лишь if:

<div className="skillSection"> 
    {this.state.challengeChoices.length < 0 && 
     <ChallengeSkill key={i} {...para2} callback={this.madeSelection} /> 
    } 
</div> 

Конечно, если/еще имеет много вариантов:

// Use inline if/else with some more readable spacing/indentation 
render() { 
    return (
     <div className="skillSection"> 
      {this.state.challengeChoices.length < 0 ? (
       <ChallengeSkill key={i} {...para2} callback={this.madeSelection} /> 
      ) : (
       <div>False</div> 
      )} 
     </div> 
    ) 
} 

// Define as variable 
render() { 
    let dom = <div>False</div>; 
    if (this.state.challengeChoices.length < 0) { 
     dom = <ChallengeSkill key={i} {...para2} callback={this.madeSelection} />; 
    } 

    return (
     <div className="skillSection"> 
      {dom} 
     </div> 
    ) 
} 

// Use another method 
getDom() { 
    if (this.state.challengeChoices.length < 0) { 
     return <ChallengeSkill key={i} {...para2} callback={this.madeSelection} />; 
    } 

    return <div>False</div>; 
} 

render() { 
    return (
     <div className="skillSection"> 
      {this.getDom()} 
     </div> 
    ) 
}