以這種方式使用速記if/else語句是錯誤的

我在學習reactjs，我試圖提高我的代碼質量。在下面的例子中，我有一個純函數，被另一個組件用來返回用戶列表。在我的代碼中，我使用簡寫if/else語句。這是寫這樣的東西的正確方式，還是有一個更清晰的方式來減少可讀性和錯誤。感謝您的任何見解。以這種方式使用速記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> 
); 
}

來源

2017-08-12 bp123

你在說三文魚嗎？我會說在這樣的情況下，他們應該避免。這些線路已經非常嘈雜。但這是一個相當主觀的問題。 – Carcigenicate

我認爲它是'jsx' – Ali

的唯一選擇是的。我在談論三文魚。你提到它很嘈雜。你怎麼能這樣做，以減少噪音？ – bp123

速記被稱爲「三元表達」，它是完全可以接受的。就「正確的方式」而言，「我們知道編程時確實沒有」正確的方式「。您應該使用使您的代碼更易讀易懂的模式。我個人認爲三元表達式非常簡單，並且使代碼易於推理。

我個人喜歡把我的ternaries像這樣

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

這樣我可以很容易一眼看出什麼是什麼。這完全取決於你自己的個人風格。

來源

2017-08-12 21:18:58 archae0pteryx

以這種方式使用速記if/else語句是錯誤的

回答

相關問題