React prop-types：来自现有 prop-types 的可重用验证器

Question

当谈到在 React 中使用 prop-types 时，有没有一种方法可以从现有的验证器中创建可重用的验证器

示例：验证 "header" object 其中 header 具有标题和图标：

Component.propTypes = {
  header: PropTypes.shape({
    title: PropTypes.string.isRequired,
    icon: PropTypes.element,
  })
}

我们可以编写一个可重用的 isHeader 函数，而不是在 prop 沿着组件链传递时重复此操作

Component.propTypes = {
  header: isHeader
}

Answer 1

您可以使用类似的东西：

export const shared = {
  header: PropTypes.shape({
    title: PropTypes.string.isRequired,
    icon: PropTypes.element,
  })
}

然后：

Component.propTypes = {
  {...shared}
}

Answer 2

您应该能够像这样创建您的可重用类型：

const myReusableHeader = PropTypes.shape({
  title: PropTypes.string.isRequired,
  icon: PropTypes.element,
})

然后你可以像这样在你的组件中使用它：

Component.propTypes = {
  header: myReusableHeader
}

react prop-types: reusable validator from existing prop-types