組件作為省略參數的屬性

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。

這確實將其抽像到了太多靈活性的地步，因為任何東西都可以注入到驗證渲染道具中。