Dynamiczny atrybut w ReactJS

Chcę dynamicznie dołączać / pomijać wyłączony atrybut w elemencie przycisku. Widziałem wiele przykładów dynamicznych wartości atrybutów, ale nie samych atrybutów. Mam następującą funkcję renderowania:

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

Powoduje to błąd analizy z powodu znaku „{”. Jak mogę dołączyć / pominąć wyłączony atrybut na podstawie (boolean) wyniku AppStore.cartIsEmpty ()?

Najczystszym sposobem dodawania atrybutów opcjonalnych (w tym disabledi innych, których możesz chcieć użyć) jest obecnie użycie atrybutów rozszerzania 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'));

Używając atrybutów rozszerzania, możesz dynamicznie dodawać (lub nadpisywać) dowolne atrybuty, korzystając z instancji obiektu javascript. W powyższym przykładzie kod tworzy disabledklucz (z disabledwartością w tym przypadku), gdy disabledwłaściwość jest przekazywana do Helloinstancji składnika.

Jeśli jednak chcesz tylko użyć disabled, ta odpowiedź działa dobrze.

Do disabledatrybutu można przekazać wartość logiczną .

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

Używam React 16 i to działa dla mnie (gdzie booljest twój test):

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

Zasadniczo na podstawie testu ( bool) zwracasz obiekt z atrybutem lub zwracasz pusty obiekt.

Ponadto, jeśli chcesz dodać lub pominąć wiele atrybutów, możesz to zrobić:

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

Aby uzyskać bardziej rozbudowane zarządzane atrybuty, sugeruję prefabrykowanie obiektu z atrybutami spoza JSX (lub bez).

Bardziej przejrzystym sposobem wykonywania atrybutów dynamicznych, który działa dla wszystkich atrybutów, jest

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

Wezwij swój komponent reagowania, jak naśladowanie

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

Porady:

1. Możesz mieć dynamicAttributesfunkcję we wspólnym miejscu / narzędziach i zaimportować ją, aby używać jej we wszystkich komponentach

2. możesz przekazać wartość, nullaby nie renderować atrybutu dynamicznego

Znacznie czystsze od przyjętego rozwiązania jest rozwiązanie, o którym wspomniał AnilRedshift, ale które rozwinę.

Mówiąc najprościej, atrybuty HTML mają nazwę i wartość. Krótko mówiąc, możesz użyć nazwy tylko dla „wyłączonych”, „wielokrotnych” itp. Jednak wersja odręczna nadal działa i pozwala Reactowi działać w preferowany sposób.

disabled={disabled ? 'disabled' : undefined} to najbardziej czytelne rozwiązanie.

Możesz znaleźć coś podobnego w dokumentacji.

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

W twoim przypadku może być coś takiego

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

Ten kod używa ES6, ale wydaje mi się, że masz pomysł.

To jest fajne, ponieważ możesz przekazać wiele innych atrybutów temu komponentowi i nadal będzie działał.

Wersja, której użyłem, to:

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

Prosty i czysty sposób na zrobienie tego

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

wyłączone powinny pochodzić z takich rekwizytów

<MyComponent disabled />

Najpierw możesz po prostu sprawdzić

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

Uwaga: ** wyłączona wartość nie jest ciągiem, powinna być wartością logiczną .

Teraz dla dynamiki. Możesz po prostu napisać

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

Jak widać, używam właściwości wyłączonej iw nawiasach klamrowych może to być zmienna lokalna / zmienna stanu. Zmienna disablezawiera wartości prawda / fałsz.

To może zadziałać, problem z wyłączonymi jest taki, że nie można po prostu ustawić dla niego wartości logicznej.

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