循環/遞歸陣營PropTypes

Question

不要與a similar question混淆詢問如何定義 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，以防止週期？

注意：對於那些有興趣的人，根據我的說法，上面的工作可以正常工作，除了日誌警告和可能對性能造成的輕微影響之外。

Answer 1

單程我想出了處理遞歸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 
};