PropTypes：如何检查对象的枚举？

Question

我有一系列可能的字段：

export const fields = [
  { type: 'select', defaultValue: MAINTAIN, name: TENDENCY },
  { type: 'select', defaultValue: DISTANT_ACQUAINTANCE, name: GROUP },
  { type: 'input', defaultValue: '', name: FIRST_NAME },
  { type: 'input', defaultValue: '', name: LAST_NAME },
  { type: 'input', defaultValue: '', name: CITY },
  { type: 'input', defaultValue: '', name: COMPANY },
  { type: 'input', defaultValue: '', name: POSITION },
];

例如， const FIRSTNAME = 'firstName';。

我在<ContactCell />组件中渲染这些字段。我尝试像这样做PropTypes检查：

ContactCell.propTypes = {
  field: PropTypes.oneOf(fields).isRequired,
  handleChange: PropTypes.func.isRequired,
  value: PropTypes.string.isRequired,
};

但是当我像这样呈现一个ContactCell时：

const createContactCell = (props = {}) =>
  render(<ContactCell {...props} handleChange={() => {}} />);

const props = {
  value: 'Mike',
  field: { type: 'input', defaultValue: '', name: 'firstName' },
};
createContactCell(props);

我收到错误：

Warning: Failed prop type: Invalid prop `field` of value `[object Object]` supplied to `ContactCell`, expected one of [{"type":"select","defaultValue":"maintain","name":"tendency"},{"type":"select","defaultValue":"distantAcquaintance","name":"group"},{"type":"input","defaultValue":"","name":"firstName"},{"type":"input","defaultValue":"","name":"lastName"},{"type":"input","defaultValue":"","name":"city"},{"type":"input","defaultValue":"","name":"company"},{"type":"input","defaultValue":"","name":"position"}].
    in ContactCell

如何使用一组可能的对象正确地进行PropType检查？

Answer 1

oneOf prop类型将检查引用，但是如果要检查所有属性是否与fields数组中的一个对象匹配，则可以创建一个使用例如自定义prop类型的自定义prop类型。 Lodash isEqual比较支柱与fields阵列中的物体。

const fields = [
  { type: "select", defaultValue: MAINTAIN, name: TENDENCY },
  { type: "select", defaultValue: DISTANT_ACQUAINTANCE, name: GROUP },
  { type: "input", defaultValue: "", name: FIRST_NAME },
  { type: "input", defaultValue: "", name: LAST_NAME },
  { type: "input", defaultValue: "", name: CITY },
  { type: "input", defaultValue: "", name: COMPANY },
  { type: "input", defaultValue: "", name: POSITION }
];

ContactCell.propTypes = {
  handleChange: PropTypes.func.isRequired,
  value: PropTypes.string.isRequired,
  field: function(props, propName, componentName) {
    if (
      propName === "field" &&
      !fields.some(field => _.isEqual(props.field, field))
    ) {
      return new Error(
        "Invalid prop `field` supplied to `ContactCell`. Validation failed."
      );
    }
  }
};