React Proptypes - 对象的对象

Question

我有一个对象，它有动态键（但值是具有相同键的对象）：

menu = {
    dogs: {
        name: 'some name1',
        url: 'google.com'
    },
    cats: {
        name: 'some name2',
        url: 'facebook.com'
    },
    parrots: {
        name: 'some name3',
        url: 'linkedin.com'
    }
}

假设我有一个组件：

const Menu = ({menu}) => (
    <div>        
        {
            Object.keys(menu).map(key => (
                <div>{menu.name}</div>
            ))
        }
    </div>
);

如何使用 PropTypes 验证菜单道具？

Answer 1

您可以使用 PropTypes.objectOf() 执行以下操作：

propTypes: {
  menu: PropTypes.objectOf(
    PropTypes.shape({
      name: PropTypes.string.isRequired,
      url: PropTypes.string.isRequired,
    })
  ).isRequired
}

React Proptypes - 对象的对象

React ProptTypes - object of objects

reactjs

react-proptypes