ReactJS'de dinamik özellik

Devre dışı bırakılan özniteliği bir düğme öğesine dinamik olarak dahil etmek / çıkarmak istiyorum. Dinamik öznitelik değerlerinin çok sayıda örneğini gördüm, ancak özniteliklerin kendileri görmedim. Aşağıdaki render işlevine sahibim:

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

Bu, "{" karakteri nedeniyle bir ayrıştırma hatası verir. AppStore.cartIsEmpty () işlevinin (boolean) sonucuna göre devre dışı bırakılan özniteliği nasıl dahil edebilirim / çıkarabilirim?

İsteğe bağlı öznitelikler eklemenin en temiz yolu ( disabledve kullanmak isteyebileceğiniz diğerleri dahil ) şu anda JSX yayılma özniteliklerini kullanmaktır :

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'));

Yayılma niteliklerini kullanarak, bir javascript nesne örneği kullanarak istediğiniz nitelikleri dinamik olarak ekleyebilir (veya geçersiz kılabilirsiniz). Yukarıdaki örneğimde , özellik bileşen örneğine iletildiğinde kod bir disabledanahtar ( disabledbu durumda bir değerle) oluşturur.disabledHello

disabledYine de sadece kullanmak istiyorsanız , bu cevap işe yarar .

disabledÖzniteliğe bir boole aktarabilirsiniz .

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

React 16 kullanıyorum ve bu benim için çalışıyor ( booltestin nerede ):

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

Temel olarak, teste ( bool) göre koşullu özniteliklere sahip bir nesne döndürürsünüz veya döndürmezsiniz.

Ayrıca, birden çok öznitelik eklemeniz veya çıkarmanız gerekirse, bunu yapabilirsiniz:

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

Yönetilen daha ayrıntılı öznitelik için nesneyi JSX dışındaki özniteliklerle (veya bunlar olmadan) hazırlamanızı öneririm.

Herhangi bir öznitelik için işe yarayan dinamik öznitelikler yapmanın daha net bir yolu,

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

Aşağıdaki gibi tepki bileşeninizi arayın

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

İpuçları:

1. dynamicAttributesOrtak bir yerde / yardımcı programlarda işleve sahip olabilir ve onu tüm bileşenlerde kullanmak için içeri aktarabilirsiniz.

2. nulldinamik özniteliği oluşturmamak için değer iletebilirsiniz

Kabul edilen çözümden çok daha temiz, AnilRedshift'in bahsettiği, ancak daha da genişleteceğim çözümdür.

Basitçe söylemek gerekirse, HTML niteliklerinin bir adı ve değeri vardır. Bir kısaltma olarak, adı yalnızca "engelli", "çoklu" vb. İçin kullanabilirsiniz. Ancak uzun versiyon hala çalışır ve React'in tercih edilen şekilde çalışmasına izin verir.

disabled={disabled ? 'disabled' : undefined} en okunaklı çözümdür.

Kullandığım versiyon şuydu:

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

Dokümantasyonda buna benzer bir şey bulabilirsiniz.

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

Senin durumunda böyle bir şey olabilir

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>
    )
}

Bu kod ES6 kullanıyor, ama sanırım fikri anladınız.

Bu harika çünkü bu bileşene diğer birçok özniteliği aktarabilirsiniz ve o yine de çalışacaktır.

Bunu yapmanın basit ve temiz bir yolu

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

engelliler böyle bir şeyden gelmeli

<MyComponent disabled />

İlk önce kontrol edebilirsiniz

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

Not: ** devre dışı bırakılan değer String değil, Boole olmalıdır .

Şimdi dinamik için. Basitçe yazabilirsin

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

Gördüğünüz gibi devre dışı bırakılmış özelliği kullanıyorum ve küme parantezleri içinde yerel değişken / durum var olabilir. Değişken disable, doğru / yanlış değerlerini içerir.

Bu işe yarayabilir, engelli sorunu, bunun için basitçe boole ayarlanamaz.

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