javascript - React PropTypes - 只允许一个对象值？

Question

考虑有一个键和值映射对象，如下所示:

export const PlaceholderVisibility = {
  Always: undefined,
  Never: null,
  OnFocus: true,
  OnBlur: false
}

你会如何使用 PropTypes只允许在现有对象中指定的值？

这是我尝试过的:

import PropTypes from 'prop-types';
export const myTypes = {
  // ...
  visibility: PropTypes.oneOf(PlaceholderVisibility)
}

但我目前正在使用PropTypes.bool因为这似乎适用于这种情况，但是当例如其中一个值是字符串类型时，这仍然不起作用。

Answer 1

只允许 object 之一React PropTypes 中的值- 你可以使用PropTypes.oneOf与 Object.values()像这样:

import PropTypes from 'prop-types';

export const PlaceholderVisibility = {
  Always: 'always',
  Never: 'never',
  OnFocus: 'on-focus',
  OnBlur: 'on-blur'
}

export const myTypes = {
  // ...
  visibility: PropTypes.oneOf(Object.values(PlaceholderVisibility))
}

备注 ，上面的语句就等于这样:

export const myTypes = {
  // ...
  visibility: PropTypes.oneOf([
   'always',
   'never',
   'on-focus',
   'on-blur'
  ])
}

所以，最好有values在你的对象中相当独特以避免误用。例如，如果有人直接传递像 'always' 这样的值字符串 - react 不会提示。