Composant en tant que propriété avec des paramètres omis

Question

Je souhaite définir une propriété qui doit être un composant avec des propriétés omises.

J'ai un composant de validation avec quelques propriétés :

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

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

J'ai un composant d'entrée.

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;

Je veux donc définir que InputProps.validations doit être une validation mais omettre la valeur prop.

doit être utilisé comme ceci :

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

Answer 1

Je ne sais pas complètement ce que vous voulez réaliser ici, donc il me manque peut-être quelque chose...

Mais vous ne pouvez pas spécifier directement que prop doit être un composant avec des propriétés spécifiques. Vous pouvez mais précisez validations：省略 <ValidationProps, 'value'/>，然后代替 {React.cloneElement(props.validations, {value})} 只需实例化您的 <验证检查={props.validations} value={value}/>输入中的

Mise à jour :

Si vous ne voulez pas de dépendance entre deux composants (saisie et validation), il ne peut pas non plus y avoir de dépendance entre les interfaces des props, à moins de les partager dans un troisième module importé par les deux.

Dans ce cas, vous pouvez faire davantage d'abstraction et faire de la validation un accessoire de rendu, comme validations: (value) => ReactElement. Il peut ensuite être utilisé comme l'original, mais avec la syntaxe "flèche épaisse" ajoutée

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

Appelez simplement validations(value) 即可实例化，而不是 cloneElement.

Cela vraiment le résume au point d'être trop flexible, puisque n'importe quoi peut être injecté dans les accessoires de rendu de validation.