Komponen sebagai sifat dengan parameter yang ditinggalkan

Question

Saya ingin menentukan sifat yang mesti merupakan komponen dengan sifat yang ditinggalkan.

Saya mempunyai komponen pengesahan dengan beberapa sifat:

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

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

Saya mempunyai komponen input.

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;

Jadi saya ingin mentakrifkan bahawa InputProps.validations mestilah Pengesahan tetapi tinggalkan prop nilai.

hendaklah digunakan seperti ini:

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

Answer 1

Saya tidak sepenuhnya jelaskan apa yang anda ingin capai di sini, jadi saya mungkin terlepas sesuatu...

Tetapi anda tidak boleh menentukan secara langsung bahawa prop mestilah komponen dengan sifat tertentu. Anda boleh tetapi nyatakan validations：省略 <ValidationProps, 'value'/>，然后代替 {React.cloneElement(props.validations, {value})} 只需实例化您的 <验证检查={props.validations} value={value}/>输入中的

Kemas kini:

Jika anda tidak mahu pergantungan antara dua komponen (input dan pengesahan), tidak boleh ada pergantungan antara antara muka props sama ada, melainkan anda berkongsinya dalam modul ketiga yang diimport oleh kedua-duanya.

Dalam kes ini, anda boleh abstrak dengan lebih lanjut dan menjadikan pengesahan sebagai prop pemaparan, seperti validations: (value) => ReactElement. Ia kemudiannya boleh digunakan seperti yang asal, tetapi dengan tambahan sintaks "anak panah tebal"

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

Panggil sahaja validations(value) 即可实例化，而不是 cloneElement.

Ini benar-benar mengabstrakkannya ke tahap terlalu banyak fleksibiliti, kerana apa-apa sahaja boleh disuntik ke dalam prop pemaparan pengesahan.