使用PropTypes禁止在React组件上使用额外的道具

Question

我有一个像这样的简单React组件：

export const MyComponent = ({ name, age, debug=false }) => {
  return (
    <div>{`${name}: ${age}`}</div>
  )
}

MyComponent.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number.isRequired,
  debug: PropTypes.bool,
}

我可以这样打电话：

<MyComponent name="John Snow" age={33} />

我想拥有一种检查该组件是否被额外的道具调用，并在这种情况下运行警告/错误的方法。

我想有一个函数可以这样调用：

MyComponent.propTypes = forbidExtraProps({
  name: PropTypes.string.isRequired,
  age: PropTypes.number.isRequired,
  debug: PropTypes.bool,
})

[我看到prop-type库没有这样做的有用方法。

我发现以这种方式执行此操作的Airbnb库prop-types-exact：

import has from 'has';
import isPlainObject from './helpers/isPlainObject';

const zeroWidthSpace = '\u200b';
const specialProperty = `prop-types-exact: ${zeroWidthSpace}`;
const semaphore = typeof Symbol === 'function' && typeof Symbol['for'] === 'function' ? Symbol['for'](specialProperty) : /* istanbul ignore next */ specialProperty;

function brand(fn) {
  return Object.assign(fn, { [specialProperty]: semaphore });
}

function isBranded(value) {
  return value && value[specialProperty] === semaphore;
}

export default function forbidExtraProps(propTypes) {
  if (!isPlainObject(propTypes)) {
    throw new TypeError('given propTypes must be an object');
  }
  if (has(propTypes, specialProperty) && !isBranded(propTypes[specialProperty])) {
    throw new TypeError('Against all odds, you created a propType for a prop that uses both the zero-width space and our custom string - which, sadly, conflicts with `prop-types-exact`');
  }

  return {
    ...propTypes,
    // eslint-disable-next-line prefer-arrow-callback
    [specialProperty]: brand(function forbidUnknownProps(props, _, componentName) {
      const unknownProps = Object.keys(props).filter(prop => !has(propTypes, prop));
      if (unknownProps.length > 0) {
        return new TypeError(`${componentName}: unknown props found: ${unknownProps.join(', ')}`);
      }
      return null;
    }),
  };
}

是否有更简单的方法来执行此检查？老实说，我不理解此代码背后的逻辑。 forbidUnknownProps方法有什么作用？我想知道此代码是否可以简化。

我不想使用Typescript，我想很好地理解此代码，因为我不想在不理解的情况下使用它。

我有一个像这样的简单React组件：export const MyComponent =（{name，age，debug = false}）=> {return（

{{$ {name}：$ {age}`} ）} MyComponent.propTypes = {...

Answer 1

概述