如何聲明 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']))
}