Ich m?chte eine Eigenschaft definieren, die eine Komponente mit ausgelassenen Eigenschaften sein muss.
Ich habe eine Validierungskomponente mit einigen Eigenschaften:
interface ValidationProps { value: string, check: Array<(value) => boolean> } const Validation: FC<ValidationProps> = function(){} export default Validation;
Ich habe eine Eingabekomponente.
interface InputProps { value: string, onChange: (e: SyntaticEvent) => void, validations: ??? } const Input: FC<InputProps> = function(props){ return <span> <input value={props.value} onChange={props.onChange} /> {React.cloneElement(props.validations, {value})} </span> } export default Input;
Also m?chte ich definieren, dass InputProps.validations eine Validierung sein muss, aber die Wertstütze weglassen.
sollte wie folgt verwendet werden:
<Input value="value" onChange={...} validations={<Validation check={[(value) => value != null, (value) => value.length <= 5]} />} />
我并不完全清楚你想在這里實(shí)現(xiàn)什么,所以我可能錯(cuò)過了一些東西......
但你不能直接指定 prop 必須是具有特定屬性的組件。您可以,但是指定 validations:省略 <ValidationProps, 'value'/>
,然后代替 {React.cloneElement(props.validations, {value})}
只需實(shí)例化您的 <驗(yàn)證檢查={props.validations} value={value}/>輸入中的
更新:
如果您不希望兩個(gè)組件(輸入和驗(yàn)證)之間存在依賴關(guān)系,則 props 接口之間也不能存在依賴關(guān)系,除非您將它們共享到由兩者導(dǎo)入的第三個(gè)模塊中。
在這種情況下,您可以進(jìn)一步抽象,讓驗(yàn)證成為渲染道具,如 validations: (value) => ReactElement
。然后可以像原來一樣使用它,但添加了“粗箭頭”語法
value != null, (value) => value.length } />
只需調(diào)用 validations(value)
即可實(shí)例化,而不是 cloneElement
。
這確實(shí)將其抽象到了太多靈活性的地步,因?yàn)槿魏螙|西都可以注入到驗(yàn)證渲染道具中。