Atributo dinámico en ReactJS

Quiero incluir / omitir dinámicamente el atributo deshabilitado en un elemento de botón. He visto muchos ejemplos de valores de atributos dinámicos, pero no de atributos en sí mismos. Tengo la siguiente función de renderizado:

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

Esto arroja un error de análisis debido al carácter "{". ¿Cómo puedo incluir / omitir el atributo deshabilitado según el resultado (booleano) de AppStore.cartIsEmpty ()?

La forma más limpia de agregar atributos opcionales (incluidos disabledy otros que quizás desee usar) es actualmente usar atributos de extensión 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'));

Al usar atributos de propagación, puede agregar (o anular) dinámicamente los atributos que desee mediante una instancia de objeto javascript. En mi ejemplo anterior, el código crea una disabledclave (con un disabledvalor en este caso) cuando la disabledpropiedad se pasa a la Helloinstancia del componente.

Sin embargo, si solo desea usar disabled, esta respuesta funciona bien.

Puede pasar un booleano al disabledatributo.

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

Estoy usando React 16 y esto funciona para mí (dónde boolestá tu prueba):

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

Básicamente, según la prueba ( bool), devuelve un objeto con el atributo o devuelve un objeto vacío.

Además, si necesita agregar u omitir varios atributos, puede hacer esto:

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

Para un atributo administrado más elaborado, le sugiero que prefabrica el objeto con (o sin) los atributos fuera de JSX.

Una forma más limpia de hacer atributos dinámicos que funciona para cualquier atributo es

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

Llame a su componente de reacción como sigue

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

Consejos :

1. Podría tener dynamicAttributesfunciones en un lugar / utilidades comunes e importarlas para usarlas en todos los componentes

2. podría pasar un valor nullpara no representar el atributo dinámico

Puede encontrar algo similar a esto en la documentación.

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

En tu caso podría ser algo como esto

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

Este código usa ES6, pero creo que tienes la idea.

Esto es genial porque puede pasar muchos otros atributos a este componente y seguirá funcionando.

La versión que usé fue:

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

Una forma sencilla y limpia de hacerlo

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

discapacitado debe provenir de accesorios como este

<MyComponent disabled />

Mucho más limpia que la solución aceptada es la solución que mencionó AnilRedshift, pero que ampliaré.

En pocas palabras, los atributos HTML tienen un nombre y un valor. Como forma abreviada, puede usar el nombre solo para "desactivado", "múltiple", etc. Pero la versión a mano derecha todavía funciona y permite que React funcione de la manera que prefiera.

disabled={disabled ? 'disabled' : undefined} es la solución más legible.

Primero, simplemente puede verificar

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

Nota: ** el valor deshabilitado no es String, debe ser booleano .

Ahora para la dinámica. Simplemente puedes escribir

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

Como puede ver, estoy usando una propiedad deshabilitada y entre llaves puede ser una variable local / var de estado. La variable disablecontiene valores verdadero / falso.

Esto podría funcionar, el problema con disabled es que no se puede simplemente establecer boolean para ello.

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