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

Question

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

问题#1 我想通了； #2 有点让我困惑。下面是一些代码来说明：

假设我有这样一个对象：

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

检查此对象时，我想确保键确实是 md5 哈希，然后我想确保分配给 key1 和 [ 的每个对象中键及其值的正确性=15=]。比方说，另外，我创建了一个验证器函数，如下所示：

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（参见 this post）。那么现在如何实现呢？

Answer 1

直接从 React 使用 PropTypes 已弃用 - 而不是使用 PropTypes 本身。

正如文档中所说，declaring PropTypes is fine, just use the 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 => ElementValidation in DEV mode => Validating prop types => calling checkPropTypes which has simply been moved here

React 坚信类型安全并且完全弃用 PropTypes 似乎不太可能。它仍然存在于 docs (from the master)

您提到的调用验证器函数现在也已弃用

Note from the docs

This is new behavior, and you will only encounter it when you migrate from React.PropTypes to the prop-types package.

因此以下内容已弃用

  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;
};