是否可以将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的函数，并且如果你给出的道具不满足你想要的条件，则返回一个Error对象。