如何声明 proptypes 来验证特定字符串数组？

Question

传递给组件的值可以是字符串数组。该字符串表示不同的方向：top, right, bottom, left。

如何为组件指定 proptypes 以仅允许指定方向的数组？

  <Arrows
    directions=['left', 'bottom'] // accepts the array
  />

  <Arrows
   directions=['left', 'back'] // doesn't accept the array
  />

Answer 1

这样的事情应该可以完成这项工作：

directions: PropTypes.arrayOf(PropTypes.oneOf(['top', 'right', 'bottom', 'left'])),

Answer 2

您可以使用PropTypes对 React props 进行运行时类型检查。

使用该PropTypes.arrayOf()选项确保传递特定值的数组。作为参数，您传递PropTypes.oneOf()它接受一个值数组（箭头的方向）以从中进行选择。

import React from 'react';
import PropTypes from 'prop-types';

class Arrow extends React.Component {
  render() {
    // ... do things with the props
  }
}

Arrow.propTypes = {
   directions: PropTypes.arrayOf(PropTypes.oneOf(['left', 'bottom']))
}