Atributo dinâmico no ReactJS

Eu quero incluir / omitir dinamicamente o atributo disabled em um elemento de botão. Já vi muitos exemplos de valores de atributos dinâmicos, mas não dos próprios atributos. Tenho a seguinte função de renderização:

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

Isso gera um erro de análise por causa do caractere "{". Como posso incluir / omitir o atributo desativado com base no resultado (booleano) de AppStore.cartIsEmpty ()?

A maneira mais limpa de adicionar atributos opcionais (incluindo disablede outros que você pode querer usar) é usar atributos de propagação 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'));

Usando atributos de propagação, você pode adicionar dinamicamente (ou substituir) quaisquer atributos que desejar usando uma instância de objeto javascript. No meu exemplo acima, o código cria uma disabledchave (com um disabledvalor neste caso) quando a disabledpropriedade é passada para a Helloinstância do componente.

Se você deseja apenas usar disabled, esta resposta funciona bem.

Você pode passar um booleano para o disabledatributo.

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

Estou usando o React 16 e isso funciona para mim (onde boolestá o seu teste):

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

Basicamente, com base em test ( bool), você retorna um objeto com o atributo ou retorna um objeto vazio.

Além disso, se você precisar adicionar ou omitir vários atributos, poderá fazer o seguinte:

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

Para atributos gerenciados mais elaborados, sugiro que você pré-fabricar o objeto com (ou sem) os atributos fora do JSX.

Uma maneira mais limpa de fazer atributos dinâmicos que funciona para qualquer atributo é

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

Chame seu componente de reação como seguir

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

Dicas:

1. Você poderia ter dynamicAttributesfunção em um local / utilitários comum e importá-lo para usá-lo em todos os componentes

2. você poderia passar valor nullpara não renderizar o atributo dinâmico

Você pode encontrar algo semelhante a isso na documentação.

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

No seu caso poderia ser algo assim

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 está usando ES6, mas acho que você teve a ideia.

Isso é legal porque você pode passar muitos outros atributos para este componente e ainda funcionará.

A versão que usei foi:

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

Uma maneira simples e limpa de fazer isso

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

desativado deve vir de suportes como este

<MyComponent disabled />

Muito mais limpa do que a solução aceita é a solução que o AnilRedshift mencionou, mas que irei expandir.

Simplificando, os atributos HTML têm um nome e um valor. Como abreviação, você pode usar o nome apenas para "desativado", "múltiplo", etc. Mas a versão extensa ainda funciona e permite que o React funcione de sua maneira preferida.

disabled={disabled ? 'disabled' : undefined} é a solução mais legível.

Primeiro você pode simplesmente verificar

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

Nota: ** o valor desativado não é String, deve ser Booleano .

Agora para dinâmica. Você pode simplesmente escrever

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

Como você pode ver, estou usando a propriedade disabled e, entre chaves, pode ser variável local / var de estado. A variável disablecontém valores verdadeiro / falso.

Isso pode funcionar, o problema com desativado é que não se pode simplesmente definir o booleano para ele.

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