改善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>