Bagaimana untuk menambah sifat secara dinamik berdasarkan keadaan dalam komponen React?

Question

Adakah terdapat cara untuk menambah sifat pada komponen React hanya apabila syarat tertentu dipenuhi?

Saya perlu menambah atribut yang diperlukan dan readOnly pada elemen borang berdasarkan syarat dalam panggilan Ajax yang diberikan selepas itu, tetapi saya tidak tahu bagaimana untuk menyelesaikan masalah ini kerana readOnly="false"< /code> adalah berbeza sepenuhnya daripada Atribut yang ditinggalkan adalah berbeza.

Contoh di bawah sepatutnya menggambarkan apa yang saya mahukan, tetapi ia tidak berkesan.

(Ralat penghuraian: pengecam yang tidak dijangka)

fungsi MyInput({diperlukan}) {
  kembalikan 
}


            

Answer 1

jawapan juandemarco biasanya betul, tetapi ini ada pilihan lain.

Bina objek mengikut keinginan anda:

var inputProps = {
  value: 'foo',
  onChange: this.handleChange
};

if (condition) {
  inputProps.disabled = true;
}

Gunakan hamparan untuk rendering, dan anda juga boleh memilih untuk menghantar prop lain.

<input
    value="这个值会被inputProps覆盖"
    {...inputProps}
    onChange={overridesInputProps}
 />

Answer 2

Nampaknya, untuk sesetengah sifat, jika nilai yang dihantar kepada React bukan nilai sebenar, React akan secara bijak menghilangkan sifat tersebut. Contohnya:

const InputComponent = function() {
    const required = true;
    const disabled = false;

    return (
        <input type="text" disabled={disabled} required={required} />
    );
}

Anda akan mendapat:

<input type="text" required>

Kemas kini: Jika sesiapa ingin tahu tentang bagaimana dan mengapa ini berlaku, anda boleh mendapatkan butiran dalam kod sumber ReactDOM, khususnya di baris 30 dan 167 fail DOMProperty.js.