reactjs - 如何干燥一些需要特征标记的方法

Question

下面是我需要处理功能标志的组件。我想知道是否有人对DRY我下面的方法有什么建议 -renderFirstQuarter等等

class MoreThanSpace extends Component<Props> {

  renderFirstQuarter = (howItWorksEnabled: boolean) => {
    const icon = howItWorksEnabled ? (
      <img className={tenantcss.reassuranceIcon} src={bookIcon} alt="book_anytime" />
    ) : (
      <Icon className={m.fontLgIi} name={t('reassurance.opportunities.icon')} />
    );
    const title = howItWorksEnabled ? t('reassurance.book_anytime.title') : t('reassurance.opportunities.title')
    const body = howItWorksEnabled ? t('reassurance.book_anytime.body') : t('reassurance.opportunities.body')

    return (
      <div className={css.quarter}>
        {icon}
        <h3 className={cx(m.fontRegular, m.demi, m.fgGreyDarker, m.mtm, m.mb0, m.uppercase)}>
          {title}
        </h3>
        <p className={cx(m.fontRegular, m.mtm, m.mb0, m.fgGreyDark)}>
          {body}
        </p>
      </div>
    );
  };

  renderSecondQuarter = (howItWorksEnabled: boolean) => {
    const icon = howItWorksEnabled ? (
      <img className={tenantcss.reassuranceIcon} src={dataIcon} alt="data-driven" />
    ) : (
      <Icon className={m.fontLgIi} name={t('reassurance.service.icon')}/>
    );
    const title = howItWorksEnabled ? t('reassurance.data_driven.title') : t('reassurance.service.title')
    const body = howItWorksEnabled ? t('reassurance.data_driven.body') : t('reassurance.service.body')

    return (
      <div className={css.quarter}>
        {icon}
        <h3 className={cx(m.fontRegular, m.demi, m.fgGreyDarker, m.mtm, m.mb0, m.uppercase)}>
          {title}
        </h3>
        <p className={cx(m.fontRegular, m.mtm, m.mb0, m.fgGreyDark)}>
          {body}
        </p>
      </div>
    );
  };

  renderThirdQuarter = (howItWorksEnabled: boolean) => {
    const icon = howItWorksEnabled ? (
      <img className={tenantcss.reassuranceIcon} src={allInclusiveIcon} alt="all-inclusive"/>
    ) : (
      <Icon className={m.fontLgIi} name={t('reassurance.verified_spaces.icon')}/>
    );
    const title = howItWorksEnabled ? t('reassurance.every_idea.title') : t('reassurance.verified_spaces.title')
    const body = howItWorksEnabled ? t('reassurance.every_idea.body') : t('reassurance.verified_spaces.body')

    return (
      <div className={css.quarter}>
        {icon}
        <h3 className={cx(m.fontRegular, m.demi, m.fgGreyDarker, m.mtm, m.mb0, m.uppercase)}>
          {title}
        </h3>
        <p className={cx(m.fontRegular, m.mtm, m.mb0, m.fgGreyDark)}>
          {body}
        </p>
      </div>
    );
  };

  renderLastQuarter = (howItWorksEnabled: boolean) => {
    const icon = howItWorksEnabled ? (
      <img className={tenantcss.reassuranceIcon} src={globeIcon} alt="all-inclusive"/>
    ) : (
      <Icon className={m.fontLgIi} name={t('reassurance.global.icon')}/>
    );
    const title = howItWorksEnabled ? t('reassurance.all_in_one.title') : t('reassurance.global.title')
    const body = howItWorksEnabled ? t('reassurance.all_in_one.body') : t('reassurance.global.body')

    return (
      <div className={css.quarter}>
        {icon}
        <h3 className={cx(m.fontRegular, m.demi, m.fgGreyDarker, m.mtm, m.mb0, m.uppercase)}>
          {title}
        </h3>
        <p className={cx(m.fontRegular, m.mtm, m.mb0, m.fgGreyDark)}>
          {body}
        </p>
      </div>
    );
  };

  render() {
    const howItWorksEnabled = this.props.isFeatureEnabled('how_it_works');
    const one = this.renderFirstQuarter(howItWorksEnabled);
    const two = this.renderSecondQuarter(howItWorksEnabled);
    const three = this.renderThirdQuarter(howItWorksEnabled);
    const four = this.renderLastQuarter(howItWorksEnabled);

    return (
      <div className={css.section}>
        <Wrapper>
          <div className={cx(css.sectionBody, m.cf)}>
            {one}
            {two}
            {three}
            {four}
          </div>
        </Wrapper>
      </div>
    );
  }
}

export default MoreThanSpace;

标签： reactjsdry