循环/递归阵营PropTypes

不要与a similar question混淆询问如何定义 PropTypes递归，我正在寻找一种方式，将参数传递本身是递归没有：循环/递归阵营PropTypes

浪费周期检查已经检查过的东西，并且
由于检查器重复发生直到死亡，所以会抛出“警告：失败的道具类型：超出最大调用堆栈大小”消息。

下面是一个简单的例子，说明如何使用它。

const fields = [{ 
     accessor: 'firstName', 
     type: 'text', 
     required: true, 
     label: 'First Name', 
     placeholder: 'Enter your first name' 
}]; 

fields.push({ 
    accessor: 'children', 
    type: 'dynamicList', 
    label: 'Children', 
    fields: fields 
}); 

return (
    <Form 
     fields={fields} 
     onSave={data => console.log(data)} /> 
);

一个哈克解决方法，我能想到的是立即而不是通过某种标识，而不是该产品使用查找引用的一些道具。有没有另一种方式，而不改变React的typechecker，以防止周期？

注意：对于那些有兴趣的人，根据我的说法，上面的工作可以正常工作，除了日志警告和可能对性能造成的轻微影响之外。

来源

2017-05-29 Tyler Hoppe

单程我想出了处理递归PropTypes丙周期是调整至惰性计算方法，像这样：

function lazyFunction(f, _lazyCheckerHasSeen) { 
    return function() { 
     if (_lazyCheckerHasSeen.indexOf(arguments[0]) != -1) { 
      return true; 
     } 

     _lazyCheckerHasSeen.push(arguments[0]); 
     return f().apply(this, arguments); 
    } 
}

使用像这样，对于上述的例子：

const lazyFieldType = lazyFunction(function() { 
    return fieldType; 
}, []); 

const fieldType = PropTypes.shape({ 
    accessor: PropTypes.string.isRequired, 
    type: PropTypes.oneOf(['text', 'multitext', 'checkbox', 'select', 'multiselect', 'section', 'dynamicList']).isRequired, 
    required: PropTypes.boolean, 
    label: PropTypes.string, 
    placeholder: PropTypes.string, 
    fields: PropTypes.arrayOf(lazyFieldType), 
}); 

Form.propTypes = { 
    fields: PropTypes.arrayOf(fieldType), 
    onSave: PropTypes.func.isRequired 
};

来源

2017-05-30 17:07:46

循环/递归阵营PropTypes

回答

相关问题