如何使用 Prop-Types 强制数组形状和大小？

Posted 2023-02-22

【中文标题】如何使用 Prop-Types 强制数组形状和大小？

【英文标题】：How to enforce Array shape and size with Prop-Types?

【发布时间】：2021-11-15 02:00:27

【问题描述】：

我正在尝试创建一个属性类型，它可以是字符串或数组，只有 1 个字符串和 1 个对象形状，例如[10, message: "hello world", type: "success" ]

目前，我有：

static propTypes = 
    myProp: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.arrayOf(
            PropTypes.oneOfType([PropTypes.string, myObjectShape])
        ),
    ]),
 

这将接受可以包含任意数量的字符串或对象形状的字符串或数组。有没有办法将数组限制为只有 1 个字符串和 1 个对象形状？

【问题讨论】：

这能回答你的问题吗？ React proptype array with shape

@tdranv 嘿，不，它没有。该答案只是检查对象的形状，而我需要将数组大小限制为 2，并且只接受字符串和 myObjectShape。

【参考方案1】：

您可以创建自定义道具类型。类似的东西......

myProp: function(props, propName, componentName) 
    if (!props[propName] || !props[propName].length !== 2) 
      return new Error(`$propName must be an array with length 2`);
    

    if (typeof props[propName][0] !== 'string') 
      return new Error(`The first element in $propName must be a string`);
    

    // check for the shape of the object at index 1...

更多信息here。