Question

我正在构建一个ReactJS Web应用程序，该应用程序具有一个特定的页面，在该页面上有很多可以为空的信息，这些信息可以根据用户权限（以及数据的存在）显示或不显示。

我首先在一个肿的巨大组件中使用了许多if，然后开始提取到较小的子组件中，这些子组件可以自行确定是否应该返回null或呈现某些内容。但是，我开始看到许多组件的行为几乎相同（也就是检查通过props传递的数据是否为空，也基于通过props传递的用户权限进行显示，并分配自定义图标，而不是通过props传递，但是在子级中组件本身）。

我大约有10个这样的组件。这是代码的味道，应该重构吗？

这里是一个例子：

父项

const InfoPerson = ({person}) => {

const {
 birthdate,
 first_name,
 last_name,
 confidential,
 address,
 state,
 permissions
 is_company
 /...
} = person

return (
 <Container>
  <PersonCompanyOwner isCompany={is_company}
                                firstName={first_name}
                                lastName={last_name}/> // Always visible, no user rights check

  <PersonAddress confidential={confidential}
                           canViewConfidential={permissions.can_view_confidential}
                           state={state}
                           address={address}/> // Does supplementary confidential check

  <PersonBirthdate confidential={confidential}
                            canViewConfidential={permissions.can_view_confidential}
                            date={birthdate}/> // Also confidential check


  </Row>
 </Container>
 )
}

未选中的子组件：

const PersonCompanyOwner = ({isCompany, firstName, lastName, job}) => {
  if (!isCompany || (!firstName && !lastName && !job)) {
    return null
  }

  return (
    <PersonItem icon={faUser}>
      {firstName && <div>{firstName}</div>}
      {lastName && <div>{lastName}</div>}
      {job && <div>{job}</div>}
    </PersonItem>
  )
}

有机密支票的孩子：

const PersonDate = ({ icon, date, confidential, canViewConfidential }) => {

  if (!date) {
    return null
  }

  return (
    <ConfidentialInformation isConfidential={confidential}
                             canViewConfidential={canViewConfidential}>
      <PersonItem icon={faCalendar}>
        <FormattedMessage id="date_format">
          {dateFormat => <span>{format(date, dateFormat)}</span>}
        </FormattedMessage>
      </PersonItem>
    </ConfidentialInformation>
  )
}

我的组件是否重复，还是可以分开？

0 个答案: