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

要在React PropTypes只允許一個object值 - 您可以像這樣使用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在你的對象相當獨特的，以避免misusages。 例如，如果有人直接傳遞像'always'字符串這樣'always'值 - react 不會抱怨。