将 URL 组件改进为更好的 reactjs 代码答案

【问题标题】：Improve URL component to be better reactjs code将 URL 组件改进为更好的 reactjs 代码
【发布时间】：2017-08-10 05:08:12
【问题描述】：

基本上，这个组件控制着我的应用程序中的许多链接。这些页面可以由不止一种类型的用户访问，因此 url 中的内容需要更改。在下面的示例中，您有管理员用户和候选用户。 url 发生更改，因为我在以管理员身份访问时使用 URL Params 访问候选人详细信息。

此代码有效，但是，我想知道是否有更好的方法或更reactjs 方法来编写此代码。 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
};

【问题讨论】：

标签： reactjs

【解决方案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>

【讨论】：

命名不是强项，它是复数，因为组件中有多个链接。欣赏这些见解。