このように簡略化されたif/else文を使うのは間違っていますか？

Question

私はreactjsを学んでいます。私は自分のコードの品質を向上させようとしています。以下の例では、別のコンポーネントがユーザーのリストを返すために使用する純粋な関数を持っています。私のコードの中で、私は省略表現if/else文を使用します。これは、このようなものを書く正しい方法ですか、または読みやすさとエラーを最小限に抑えるためのよりクリーンな方法です。どんな洞察にも感謝します。

function CandidateList(props) { 
    return (
    <Row className="candidate-white-background"> 
     <Col xs={3} sm={2}> 
     { 
      props.candidate.profileAvatarURL 
      ? <Image className="img-responsive" src={props.candidate.profileAvatarURL} rounded /> 
      : <Alert bsStyle="danger" className="text-center nothing-in-section-alert-box"> 
       No Profile Image 
      </Alert> 
     } 
     </Col> 
     <Col xs={9} sm={10}> 
     { props.candidate.name ? <Link to={`/admin/candidate_profile/${props.candidate.userId}`}> <h3 className="candidate-profile-name">{(props.candidate.name.first + ' ' + props.candidate.name.last)}</h3></Link> : 'No name' } 

     { props.candidate.professionalOverview ? <h4>{(props.candidate.professionalOverview.currentCompany + ' ' + props.candidate.professionalOverview.currentTitle)}</h4> : 'Mobile missing' } 
     { props.candidate.summary ? <p>{props.candidate.summary.substring(0, 300)}</p> : 'No summary' } 
     { props.candidate.contact ? <p><FontAwesome className="fa-fw" name="mobile"/>{props.candidate.contact.mobile}</p> : <p><FontAwesome className="fa-fw" name="mobile" />N/A</p> } 
     { props.candidate.address ? <p><FontAwesome className="fa-fw" name="map-marker"/>{props.candidate.address.fullAddress}</p> : <p><FontAwesome className="fa-fw" name="map-marker" />N/A</p> } 
     </Col> 
    </Row> 
); 
} 

Answer 1

省略表現は「3進表現」と呼ばれ、完全に受け入れられます。 「適切な方法」については、プログラミングの際に「正しい方法」がないことがわかっています。コードを読みやすく、理解しやすいパターンにする必要があります。私は個人的には、三元表現が非常に単純であり、コードを推論しやすくすると思います。

私は個人的に私は簡単に何が何を一目で見ることができますので、

{ this.state.someProp 
? <AThing/> 
: <SomeOtherThing/> 
} 

その方法のように私の三元系を入れたいです。しかし、これはあなたの個人的なスタイルに依存します。