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对象提供的道具不满足您想要的条件。

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

1 个答案: