如何使用已由另一个 propType 接口定义的动态键和值来验证 propType 形状？

Question

假设我为用户 object有以下道具类型接口：

const userPropType = shape({
  name: string,
  address: string,
  age: number    
});

然后我想验证一个全局用户的 object由 props 接收，它由几个单独的用户对象组成，其中键是随机数字 ID。 例如：

{
  3142: {
    name: 'Jonh Doe',
    address: 'Baker Street',
    age: 23 
  },
  4345: {
    name: 'Jane Doe',
    address: 'Fourth Avenue',
    age: 64 
  }
}

我知道我可以使用 Prop Type 自定义验证器毫无问题地验证数字键。 但问题是：如何使用可以动态验证密钥的自定义处理程序以及基于我已经定义的userPropType接口的值来验证我的全球用户的 object。

在这个简短的示例中，我可以轻松地在自定义验证器上键入检查每个用户属性，但如果我们考虑一个真实的案例场景，即我的用户 object 可能有超过 50 个属性，自定义验证每个属性会很烦人他们，特别是当我已经为我的单个用户 object 定义了 propType 时。

那么，问题来了：是否可以在自定义验证器中使用已经定义的 prop-type 接口？

谢谢！

Answer 1

我已经看到这还没有得到回答。 因为我已经找到了解决方案，所以我在这里分享它，希望它可以对其他开发人员有所帮助。

我已经实现了一个自定义验证器，它可以检查道具是否确实符合我期望的格式。

澄清一下，我的“用户”属性应该是带有数字键的 object（即使表示为字符串）并具有三个属性：名称（字符串）、地址（字符串）和年龄（数字）。

这是我的自定义实现：

const usersObjectPropType = (
  propValue,
  key,
  componentName
) => {
  let isNotValid;
  const userKeys = Object.keys(propValue.users);
  const userValues = Object.values(propValue.users);
  const allKeysAreNumeric = userKeys.every(key => !Number.isNaN(Number(key)));
  userValues.forEach(user => {
    if (typeof user.name !== 'string') {
      isNotValid = ['name', 'string', user.name];
    } else if (typeof user.address !== 'string') {
      isNotValid = ['address', 'string', user.address];
    } else if (typeof user.age !== 'number') {
      isNotValid = ['age', 'number', user.age];
    }
  });

  if (!allKeysAreNumeric) {
    return new Error(
      `Invalid prop '${key}' supplied to ${componentName} component. The keys for the '${key}' object should have the type 'number'.`
    );
  }
  if (isNotValid) {
    return new Error(
      `Invalid prop in '${key}' object supplied to ${componentName} component. The type of '${
        isNotValid[0]
      }' attribute provided was '${typeof isNotValid[2]}' and a '${
        isNotValid[1]
      }' was expected.`
    );
  }
};

Child.propTypes = {
  users: usersObjectPropType
};

这是一个工作演示，您可以在其中将 App 发送的道具类型更改为子组件，并在控制台上查看 PropType 错误：

https://stackblitz.com/edit/react-4sunky?file=src/App.js