ReactJS：对象数组的 propTypes 验证

Question

我有一个对象数组

[
    {
      id: 1,
      customtitle: '',
      IconSRC: '',
      btnColor: '',
      inlineSyle: '',
      btnStyle: {
        width: '100px',
        height: '100px',
        flexDirection: 'column',

      },
      num: 1,
    },
    {
      id: 2,
      customtitle: '',
      IconSRC: '',
      btnColor: '',
      inlineSyle: '',
      btnStyle: {
        width: '100px',
        height: '100px',
        flexDirection: 'column',

      },
      num: 2,
    },]

我对让它作为 props 验证感到困惑。我需要帮助来修复它，我尝试这种方式

Function.propTypes = {
  list: PropTypes.objectOf(PropTypes.shape({
    id: PropTypes.number,
    btnColor: PropTypes.string,
    customTitle: PropTypes.string,
    btnStyle:PropTypes.object
    IconSRC: PropTypes.string,
    inlineSyle: PropTypes.string,
  })),
};
Function.defaultProps = {
  List: [],
};

但这没有用。没有这个 proptypes 我的组件工作正常。但是 eslint 显示此文本错误

.map' is missing in props validation eslint(react/prop-types)

Answer 1

你要的其实是PropTypes.arrayOf()。例如：

list: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.number,
    btnColor: PropTypes.string,
    customTitle: PropTypes.string,
    btnStyle:PropTypes.object
    IconSRC: PropTypes.string,
    inlineSyle: PropTypes.string,
  })),

您可以看到 PropTypes 的完整列表 here。

Answer 2

您可以像这样使用它：

Function.propTypes = {
  list: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.number,
    btnColor: PropTypes.string,
    customTitle: PropTypes.string,
    btnStyle:PropTypes.object
    IconSRC: PropTypes.string,
    inlineSyle: PropTypes.string,
  })),
};
Function.defaultProps = {
  List: [],
};

另外，有关 proptypes 的更多详细信息，请访问使用 PropTypes 进行类型检查 here

ReactJS：对象数组的 propTypes 验证

ReactJS: propTypes validation for array of objects

javascript

reactjs

react-proptypes