Attributo dinamico in ReactJS

Voglio includere / omettere dinamicamente l'attributo disabilitato su un elemento pulsante. Ho visto molti esempi di valori di attributi dinamici, ma non di attributi stessi. Ho la seguente funzione di rendering:

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

Ciò genera un errore di analisi a causa del carattere "{". Come posso includere / omettere l'attributo disabilitato in base al risultato (booleano) di AppStore.cartIsEmpty ()?

Il modo più pulito per aggiungere attributi facoltativi (inclusi disablede altri che potresti voler utilizzare) è attualmente utilizzare gli attributi di diffusione 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'));

Utilizzando gli attributi spread, puoi aggiungere dinamicamente (o sovrascrivere) qualsiasi attributo desideri utilizzando un'istanza di oggetto JavaScript. Nel mio esempio precedente, il codice crea una disabledchiave (con un disabledvalore in questo caso) quando la disabledproprietà viene passata Helloall'istanza del componente.

Se vuoi solo usare disabledperò, questa risposta funziona bene.

Puoi passare un valore booleano disabledall'attributo.

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

Sto usando React 16 e questo funziona per me (dov'è il booltuo test):

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

Fondamentalmente, in base a test ( bool) restituisci un oggetto con l'attributo o restituisci un oggetto vuoto.

Inoltre, se devi aggiungere o omettere più attributi, puoi farlo:

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

Per attributi più elaborati gestiti ti suggerisco di prefabbricare l'oggetto con (o senza) gli attributi al di fuori di JSX.

È un modo più pulito di eseguire attributi dinamici che funziona per qualsiasi attributo

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

Chiama il tuo componente React come segue

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

Suggerimenti :

1. Potresti avere la dynamicAttributesfunzione in un luogo / utilità comune e importarlo per usarlo su tutti i componenti

2. potresti passare valore nullper non rendere l'attributo dinamico

Puoi trovare qualcosa di simile a questo nella documentazione.

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

Nel tuo caso potrebbe essere qualcosa del genere

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

Questo codice usa ES6, ma penso che tu abbia avuto l'idea.

Questo è interessante perché puoi passare molti altri attributi a questo componente e continuerà a funzionare.

La versione che ho usato è stata:

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

Un modo semplice e pulito per farlo

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

disabilitato dovrebbe provenire da oggetti di scena come questo

<MyComponent disabled />

Molto più pulita della soluzione accettata è la soluzione menzionata da AnilRedshift, ma che approfondirò.

In poche parole, gli attributi HTML hanno un nome e un valore. Come abbreviazione, puoi usare il nome solo per "disabilitato", "multiplo", ecc. Ma la versione a mano lunga funziona ancora e consente a React di funzionare nel modo preferito.

disabled={disabled ? 'disabled' : undefined} è la soluzione più leggibile.

Per prima cosa puoi semplicemente controllare

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

Nota: ** il valore disabilitato non è String, dovrebbe essere booleano .

Ora per dinamico. Puoi semplicemente scrivere

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

Come puoi vedere sto usando la proprietà disabilitata e tra parentesi graffe può essere variabile locale / stato var. La variabile disablecontiene valori vero / falso.

Questo potrebbe funzionare, il problema con disabled è che non si può semplicemente impostare booleano per esso.

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