如何在React v16中手动调用自定义PropType验证器

Question

我有一个用例，我需要编写一个自定义的React PropType验证器。 在该检查器中，我想做两件事：1）验证对象内部的道具名称（它们是动态生成的）都是md5哈希值，以及2）验证连接到每个道具的对象的“形状”。

问题＃1我已经知道了； ＃2让我有些迷惑。 这是一些代码说明：

说我有一个这样的对象：

{
  key1: {
    byHash: {
      '<some md5 hash>': { ... }
    }
  },
  key2: {
    byHash: {
      '<some md5 ash>': { ... }
    }
  }
}

在检查该对象时，我想确保键确实是md5哈希，然后我要确保分配给key1和key2每个对象中键及其值的正确性。 可以说，此外，我还创建了一个验证器函数，如下所示：

const validObjShape = PropTypes.shape({
  someString: PropTypes.string.isRequired,
  someBoolean: PropTypes.bool
});

然后，编写我的自定义验证器函数：

const validCustomProp  = (props, propName, componentName) => {
  const obj = props[propName];

  if (!isObject(obj)) {
    return new Error(
      //eslint-disable-next-line
      'Invalid prop `' + propName + '`of type `' + typeof obj + '` supplied to ' +
      '`' + componentName + '`, expected an object.'
    );
  }

  if (isEmpty(obj)) {
    return null;
  }

  forEach(obj, (v, k) => {
    const isMD5 = (/[a-fA-F0-9]{32}/).test(k);

    if (!isMD5) {
      throw new Error(
        //eslint-disable-next-line
        'Invalid dynamic key on `' + propName + '`. All keys ' +
        'on this object should be md5 hashes, but we found `' + k + '` instead.'
      );
    }
  });

  // Here I want to somehow validate each object on `obj`. Something like:
  // forEach(obj, (v, k) => { 
  //   const err = validObjShape(props[propName], k, componentName);
  //   if (err) {
  //     // throw some err...
  //   }
  // }

  return null;
};

我的问题（如上所述）可以使用上面创建的validObjShape来验证嵌套在obj中的对象的形状。 我认为在React v16中将不允许直接调用验证器fn（请参阅本文 ）。 那么现在如何实现呢？

Answer 1

不PropTypes 从React直接使用PropTypes不使用PropTypes本身。

就像在文档中说的那样， 声明PropTypes很好 ，只需使用prop-types库即可。

所以，

const apiShape = React.PropTypes.shape({
  body: customValidator,
  statusCode: React.PropTypes.number.isRequired
}).isRequired;

只需更改为

import PropTypes from 'prop-types';
const apiShape = React.PropTypes.shape({
  body: customValidator,
  statusCode: PropTypes.number.isRequired
}).isRequired;

而且customValidator不必更改。

您可以在源代码中对此进行验证： ElementCreation => DEV模式下的ElementValidation => 验证道具类型 => 调用仅在此处移动的checkPropTypes

React坚信类型安全性，并且完全不赞成使用PropTypes似乎不太可能。 它仍然存在于文档中（来自母版）

如前所述，调用验证函数也已被弃用

来自文档的注释

这是新行为，只有在从React.PropTypes迁移到prop-types包时才会遇到它。

所以不推荐使用以下内容

  Object.keys(props[propName]).forEach(k => {

    // const v = props[propName][k];
    const isMD5 = (/[a-fA-F0-9]{32}/).test(k);
    if (!isMD5) {
      return new Error(
        'Not an md5'
      );
    }

    return validObjShape(props[propName], k, componentName);
  });

而是使用checkPropTypes ：

const validObjShape = PropTypes.shape({
  someString: PropTypes.string.isRequired,
  someBoolean: PropTypes.bool
});

const validCustomProp  = (props, propName, componentName) => {

  Object.keys(props[propName]).forEach(k => {

    const v = props[propName][k];
    const isMD5 = (/[a-fA-F0-9]{32}/).test(k);
    if (!isMD5) {
      return new Error(
        'Not an md5'
      );
    }

    PropTypes.checkPropTypes({ [k]: validObjShape }, { [k]: v }, propName, componentName);

  });


  return null;
};