改善URL組件以便更好地反應代碼

Question

基本上，這個組件控制了我的應用程序中的許多鏈接。這些頁面可以被多種類型的用戶訪問，因此url中的內容需要改變。在下面的例子中，你有管理員用戶和候選用戶。網址更改是因爲我使用網址Params作爲管理員訪問時訪問候選人詳細信息。

此代碼有效，但是，我想知道是否有更好的方法或更多的reactjs方法來編碼。新的反應，很多東西要學。

export default class EditCandidateProfileLinks extends React.Component { 
    render() { 

    if (this.props.authenticatedCandidate) { 
     var contactDetails = '/candidate/edit_profile/contact_details'; 
    } 

    if (this.props.authenticatedAdmin) { 
     var contactDetails = `/admin/candidate_profile/edit/contact_details/${this.props.candidateUserId}` 
    } 
    return (
     <div> 
     <Nav className="hidden-xs hidden-sm"> 
      <LinkContainer 
      activeClassName="active" 
      to={contactDetails} 
      > 
      <NavItem> 
       Contact details 
      </NavItem> 
      </LinkContainer> 
     </Nav> 
     </div> 
    ); 
    } 
} 

EditCandidateProfileLinks.propTypes = { 
    authenticatedCandidate: PropTypes.bool, 
    authenticatedAdmin: PropTypes.bool, 
    candidateUserId: PropTypes.string 
}; 

Answer 1

首先，如果你只有兩種類型的用戶，可以提高一點點代碼：

• 只是給isAdmin與否。

• 如果您使用es6，請不要忘記，您已經LET和CONST。

其次，我不明白組件的名稱：EditCandidateProfileLinks。爲什麼它是複數形式？

您還可以將組件轉換爲純函數。 （爲例：enter link description here）

const EditCandidateProfileLinks = ({ isAdmin }) => { 
 
    let uriDetails = '/candidate/edit_profile/contact_details'; 
 
    if (isAdmin) { 
 
    uriDetails = `/admin/candidate_profile/edit/contact_details/${this.props.candidateUserId}`; 
 
    } 
 
    return (
 
    <div> 
 
     <Nav className="hidden-xs hidden-sm"> 
 
     <LinkContainer 
 
      activeClassName="active" 
 
      to={uriDetails} 
 
     > 
 
      <NavItem> 
 
      Contact details 
 
      </NavItem> 
 
     </LinkContainer> 
 
     </Nav> 
 
    </div> 
 
); 
 
} 
 

 
EditCandidateProfileLinks.propTypes = { 
 
    isAdmin: PropTypes.bool, 
 
    candidateUserId: PropTypes.string 
 
}; 
 
export default EditCandidateProfileLinks;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>