Atribut dinamis di ReactJS

Saya ingin menyertakan / menghilangkan atribut nonaktif secara dinamis pada elemen tombol. Saya telah melihat banyak contoh nilai atribut dinamis, tetapi tidak dari atribut itu sendiri. Saya memiliki fungsi render berikut:

render: function() {
    var maybeDisabled = AppStore.cartIsEmpty() ? "disabled" : "";
    return <button {maybeDisabled}>Clear cart</button>
}

Ini memunculkan kesalahan parse karena karakter "{". Bagaimana cara menyertakan / menghilangkan atribut yang dinonaktifkan berdasarkan hasil (boolean) dari AppStore.cartIsEmpty ()?

Cara terbersih untuk menambahkan atribut opsional (termasuk disableddan lainnya yang mungkin ingin Anda gunakan) saat ini menggunakan atribut sebaran JSX :

var Hello = React.createClass({
    render: function() {
        var opts = {};
        if (this.props.disabled) {
            opts['disabled'] = 'disabled';
        }
        return <button {...opts}>Hello {this.props.name}</button>;
    }
});

React.render((<div><Hello name="Disabled" disabled='true' />
    <Hello name="Enabled"  />
</div>)
, document.getElementById('container'));

Dengan menggunakan atribut sebar, Anda dapat secara dinamis menambahkan (atau mengganti) atribut apa pun yang Anda inginkan dengan menggunakan contoh objek javascript. Dalam contoh saya di atas, kode membuat disabledkunci (dengan disablednilai dalam kasus ini) ketika disabledproperti diteruskan ke Helloinstance komponen.

Jika Anda hanya ingin menggunakan disabled, jawaban ini berfungsi dengan baik.

Anda bisa meneruskan boolean ke disabledatribut.

render: function() {
    return <button disabled={AppStore.cartIsEmpty()}>Clear cart</button>
}

Saya menggunakan React 16 dan ini berfungsi untuk saya (di mana booltes Anda):

<fieldset {...(bool ? {disabled:true} : {})}>

Pada dasarnya, berdasarkan test ( bool) Anda mengembalikan objek dengan atribut atau Anda mengembalikan objek kosong.

Selain itu, jika Anda perlu menambahkan atau menghilangkan beberapa atribut, Anda dapat melakukan ini:

<fieldset {...(bool ? {disabled:true} : {})} {...(bool ? {something:'123'} : {})}>

Untuk atribut yang lebih rumit, saya sarankan Anda membuat prefab objek dengan (atau tanpa) atribut di luar JSX.

Cara yang lebih bersih dalam melakukan atribut dinamis yang berfungsi untuk atribut apa pun adalah

function dynamicAttributes(attribute, value){
  var opts = {};
  if(typeof value !== 'undefined' && value !== null) {
    opts['"'+attribute+'"'] = value;
    return opts;
  }
  return false;
};

Panggil komponen react Anda seperti berikut

<ReactComponent {...dynamicAttributes("disabled",false)}
{...dynamicAttributes("data-url",dataURL)}
{...dynamicAttributes("data-modal",true)} />

Tips:

1. Anda dapat memiliki dynamicAttributesfungsi di tempat / utilitas umum dan mengimpornya untuk digunakan di semua komponen

2. Anda bisa memberikan nilai nulluntuk tidak merender atribut dinamis

Jauh lebih bersih daripada solusi yang diterima adalah solusi yang disebutkan AnilRedshift, tetapi yang akan saya kembangkan.

Sederhananya, atribut HTML memiliki nama dan nilai. Singkatnya, Anda dapat menggunakan nama hanya untuk "nonaktif", "multipel", dll. Tetapi versi lama masih berfungsi, dan memungkinkan React untuk bekerja dengan cara yang disukai.

disabled={disabled ? 'disabled' : undefined} adalah solusi yang paling terbaca.

Versi yang saya gunakan adalah:

<button disabled={disabled ? 'disabled' : undefined}>
    Click me (or dont)
</button>

Anda dapat menemukan yang serupa dengan ini di dokumentasi.

https://facebook.github.io/react/docs/transferring-props.html

Dalam kasus Anda bisa jadi seperti ini

function MyComponent(props) {
    let { disabled, ...attrs } = props;
    if (disabled) {
        // thus, it will has the disabled attribute only if it
        // is disabled
        attrs = {
            ...attrs,
            disabled: true
        }
    };

    return (
        <button {...attrs}>MyLabel</button>
    )
}

Kode ini menggunakan ES6, tapi saya rasa Anda mengerti.

Ini keren karena Anda bisa meneruskan banyak atribut lain ke komponen ini dan itu akan tetap berfungsi.

Cara yang sederhana dan bersih untuk melakukannya

<button {...disabled && {disabled: true}}>Clear cart</button>

Cacat harus berasal dari alat peraga seperti ini

<MyComponent disabled />

Pertama, Anda cukup memeriksanya

<button disabled={true}>Button 1</button>
<button disabled={false}>Button 2</button>

Catatan: ** nilai yang dinonaktifkan bukanlah String, melainkan Boolean .

Sekarang untuk dinamis. Anda cukup menulis

<button type="button" disabled={disable}  
        onClick={()=>this.setSelectValue('sms')} >{this.state.sms}</button>

Seperti yang Anda lihat, saya menggunakan properti yang dinonaktifkan dan dalam tanda kurung kurawal dapat berupa variabel lokal / state var. Variabel disableberisi nilai benar / salah.

Ini bisa berhasil, masalah dengan penyandang cacat adalah seseorang tidak bisa begitu saja mengatur boolean untuk itu.

if(AppStore.cartIsEmpty()){
  return "<button disabled>Clear cart</button>"
}
else
{
  return "<button>Clear cart</button>"
}