javascript - 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,
    },]

我很困惑让它作为道具验证工作。我需要帮助来修复它，我尝试这种方式

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' eslint(react/prop-types)

标签： javascriptreactjsreact-proptypes

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,
  })),

您可以在此处查看 PropType 的完整列表。