cari

Rumah  >  Soal Jawab  >  teks badan

Komponen sebagai sifat dengan parameter yang ditinggalkan

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

Saya mempunyai komponen pengesahan dengan beberapa sifat:

1

2

3

4

5

6

7

interface ValidationProps {

    value: string,

    check: Array<(value) => boolean>

}

 

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

export default Validation;

Saya mempunyai komponen input.

1

2

3

4

5

6

7

8

9

10

11

12

13

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:

1

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

P粉803527801P粉803527801281 hari yang lalu407

membalas semua(1)saya akan balas

  • P粉425119739

    P粉4251197392024-04-04 09:27:11

    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"

    1

    <input value="value" onchange="{...}" validations="{()" ==""> <validation check="{[(value)" ==""> value != null, (value) => value.length <= 5]} />} /></validation>

    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.

    balas
    0
  • Batalbalas