javascript - 是否可以将 Proptypes 用于复杂对象的关联数组

Question

这是我正在寻找的给定结构的示例

const fields = {
  ["NAME"]: {isSet: false, display: "Customer Name", required: true},
  ["PHONE"]: {isSet: false, display: "Customer Phone", required: true},
  ["LOCATION_ID"]: {isSet: false, display: "Location ID", required: true},
  ["EMPLOYEE_ID"]: {isSet: false, display: "Employee ID", required: false},
  ["CUSTOMER_EMAIL"]: {isSet: false, display: "Customer Email", required: false},
  ["EMPLOYEE_EMAIL"]: {isSet: false, display: "Employee Email", required: false}
};

键可以是任何字符串值，该值应该是具有isSet, display, required

的对象

这甚至可能吗，还是我必须编写自定义验证程序？

Header.propTypes = {
  fields: propTypes.arrayOf(propTypes.shape({
    ..... ?
  })).isRequired
};

Answer 1

这里首先要注意的是，您不能使用 PropTypes.arrayOf，因为您的结构是对象，而不是数组。您需要使用 PropTypes.shape，但如您所料，您只能使用自定义验证器来执行此操作。

如果您检查 source code对于形状验证器，您会看到它返回一个函数，该函数循环遍历您传递给它的对象的键并运行您沿每个键传递的验证器。也就是说，你需要传递一个带有显式键名的对象，它可以是变量，但你不能给它一个占位符。

但是，如果您的数据结构确实是一个数组，您可以执行以下操作:

Header.propTypes = {
    fields: PropTypes.arrayOf(PropTypes.shape({
        isSet: PropTypes.bool.isRequired,
        display: PropTypes.string.isRequired,
        required: PropTypes.bool.isRequired
    )).isRequired
}

否则你将不得不编写一个自定义验证器，它是一个接收props、propName 和componentName 的函数，并且如果给定的 Prop 不满足您想要的条件，则返回一个 Error 对象。