组件作为省略参数的属性

Question

我想定义一个属性，该属性必须是具有省略属性的组件。

我有一个具有一些属性的验证组件：

interface ValidationProps {
    value: string,
    check: Array<(value) => boolean>
}

const Validation: FC<ValidationProps> = function(){}
export default Validation;

我有一个输入组件。

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;

所以我想定义 InputProps.validations 必须是一个 Validation 但省略了 value prop。

应该这样使用：

<Input value="value" onChange={...} validations={<Validation check={[(value) => value != null, (value) => value.length <= 5]} />} />

Answer 1

我并不完全清楚你想在这里实现什么，所以我可能错过了一些东西......

但你不能直接指定 prop 必须是具有特定属性的组件。您可以，但是指定 validations：省略 <ValidationProps, 'value'/>，然后代替 {React.cloneElement(props.validations, {value})} 只需实例化您的 <验证检查={props.validations} value={value}/>输入中的

更新：

如果您不希望两个组件（输入和验证）之间存在依赖关系，则 props 接口之间也不能存在依赖关系，除非您将它们共享到由两者导入的第三个模块中。

在这种情况下，您可以进一步抽象，让验证成为渲染道具，如 validations: (value) => ReactElement。然后可以像原来一样使用它，但添加了“粗箭头”语法

  value != null, (value) => value.length <= 5]} />} />

只需调用 validations(value) 即可实例化，而不是 cloneElement。

这确实将其抽象到了太多灵活性的地步，因为任何东西都可以注入到验证渲染道具中。