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]} />} />
我并不完全清楚你想在这里实现什么,所以我可能错过了一些东西......
但你不能直接指定 prop 必须是具有特定属性的组件。您可以,但是指定
validations:省略 <ValidationProps, 'value'/>
,然后代替{React.cloneElement(props.validations, {value})}
只需实例化您的<验证检查={props.validations} value={value}/>输入中的
更新:
如果您不希望两个组件(输入和验证)之间存在依赖关系,则 props 接口之间也不能存在依赖关系,除非您将它们共享到由两者导入的第三个模块中。
在这种情况下,您可以进一步抽象,让验证成为渲染道具,如
validations: (value) => ReactElement
。然后可以像原来一样使用它,但添加了“粗箭头”语法只需调用
validations(value)
即可实例化,而不是cloneElement
。这确实将其抽象到了太多灵活性的地步,因为任何东西都可以注入到验证渲染道具中。