javascript - 如何将 propTypes 设置为 HOC 孩子？

Question

给定以下代码：

const PricingCard = withLanguage(({ t, onConfirm }) => {
  const { colors } = useTheme();

  return (
    <RNPricingCard
      color={colors.primary}
      title="Premium"
      price="$7"
      info={t("premium.card.advantages")}
      button={{
        title: t("premium.card.becomePremiumPremium"),
        titleStyle: styles.buttonTitle,
      }}
      onButtonPress={onConfirm}
    />
  );
});

尝试将 propTypes 设置为 PricingCard，如下所示：

PricingCard.propTypes = {
  t: PropTypes.func.isRequired,
  onConfirm: PropTypes.func.isRequired,
};

产生错误，因为“t”方法由“withLanguage”给出。我该如何解决这个问题？

警告：失败的道具类型：道具t在 中标记为必填 <<anonymous>>，但其值为undefined。

标签： javascriptreactjsreact-nativereact-proptypes

Answer 1

PricingCard is the result of calling the higher-order component, not the anonymous component you're wrapping (which is where you meant to apply prop types). If you want to add prop types for t, move the anonymous component to a named variable like so:

const PricingCardImpl = ({ t, onConfirm }) => {
  const { colors } = useTheme();

  return (
    <RNPricingCard
      color={colors.primary}
      title="Premium"
      price="$7"
      info={t("premium.card.advantages")}
      button={{
        title: t("premium.card.becomePremiumPremium"),
        titleStyle: styles.buttonTitle,
      }}
      onButtonPress={onConfirm}
    />
  );
}
PricingCardImpl.propTypes = {
  t: PropTypes.func.isRequired,
  onConfirm: PropTypes.func.isRequired,
};

const PricingCard = withLanguage(PricingCardImpl);

Even better would be to use a hook-based api for accessing t. Or, you could skip the prop type for t since you know for sure you're providing it via the withLanguage HOC.