自定义组件PropType验证器

问题描述

我尝试编写一个与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函数以获取参数Drawer和Topbar？
2. 为什么无法读取属性“ isrequired”？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）