自定义组件PropType验证器

时间:2020-11-02 07:34:46

标签: javascript function react-proptypes

我尝试编写一个与PropType api尽可能接近的通用自定义组件PropTypes验证程序。

PropTypesHelper.js

    function component(isRequired) {
      return (props, propName, componentName, expectedComponent) => {
        // Prop is required but missing
        if (!props[propName] && isRequired) {
          return new Error(`Prop ${propName} is missing in ${componentName}.`);
        }
    
        // Prop has wrong type - 'type' has to be the parameter of component(type)
        if (props[propName] && props[propName].type !== 'type') {
          return new Error(
            `Invalid prop ${propName} supplied to ${componentName}.`
          );
        }
      };
    }
    
    const PropTypesHelper = {};
    PropTypesHelper.component = component(false);
    PropTypesHelper.component.isRequired = component(true);
    
    export default PropTypesHelper;

Component.js

    import Drawer from './Drawer';
    import Topbar from './Topbar';
    
    // ...
    
    Content.propTypes = {
      drawer: PropTypesHelper.component(Drawer),
      topBar: PropTypesHelper.component(Topbar).isRequired
    };

此代码将引发以下错误消息:

意外错误:TypeError:无法读取的属性“ isRequired” 未定义

我有2个问题:

  1. 如何设计component函数以获取参数DrawerTopbar
  2. 为什么无法读取属性“ isRequired”?

0 个答案:

没有答案
相关问题