Dynamisches Attribut in ReactJS

Ich möchte das deaktivierte Attribut eines Schaltflächenelements dynamisch einschließen / weglassen. Ich habe viele Beispiele für dynamische Attributwerte gesehen, aber nicht für Attribute selbst. Ich habe die folgende Renderfunktion:

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

Dies löst einen Analysefehler aufgrund des Zeichens "{" aus. Wie kann ich das deaktivierte Attribut basierend auf dem (booleschen) Ergebnis von AppStore.cartIsEmpty () einschließen / weglassen?

Die sauberste Methode zum Hinzufügen optionaler Attribute (einschließlich disabledund anderer, die Sie möglicherweise verwenden möchten) ist derzeit die Verwendung von JSX-Spread-Attributen :

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

Mithilfe von Spread-Attributen können Sie mithilfe einer Javascript-Objektinstanz beliebig beliebige Attribute dynamisch hinzufügen (oder überschreiben). In meinem obigen Beispiel erstellt der Code einen disabledSchlüssel ( disabledin diesem Fall mit einem Wert), wenn die disabledEigenschaft an die HelloKomponenteninstanz übergeben wird.

Wenn Sie nur verwenden möchten , disabledaber dies funktioniert Antwort gut.

Sie können dem disabledAttribut einen Booleschen Wert übergeben.

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

Ich benutze React 16 und das funktioniert bei mir (wo boolist dein Test):

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

Grundsätzlich geben Sie basierend auf test ( bool) ein Objekt mit dem Attribut zurück oder Sie geben ein leeres Objekt zurück.

Wenn Sie mehrere Attribute hinzufügen oder weglassen müssen, können Sie Folgendes tun:

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

Für eine ausführlichere Verwaltung von Attributen empfehle ich, das Objekt mit (oder ohne) Attributen außerhalb von JSX vorzufertigen.

Eine sauberere Art, dynamische Attribute zu erstellen, die für alle Attribute funktioniert, ist

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

Rufen Sie Ihre Reaktionskomponente wie folgt auf

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

Tipps:

1. Sie können eine dynamicAttributesFunktion an einem gemeinsamen Ort / in Dienstprogrammen haben und diese importieren, um sie für alle Komponenten zu verwenden

2. Sie können einen Wert übergeben, nullum keine dynamischen Attribute zu rendern

Ähnliches finden Sie in der Dokumentation.

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

In Ihrem Fall könnte so etwas sein

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

Dieser Code verwendet ES6, aber ich denke, Sie haben die Idee.

Dies ist cool, da Sie dieser Komponente viele andere Attribute übergeben können und sie weiterhin funktioniert.

Die Version, die ich verwendet habe, war:

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

Eine einfache und saubere Art, es zu tun

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

Behinderte sollten von solchen Requisiten kommen

<MyComponent disabled />

Weitaus sauberer als die akzeptierte Lösung ist die von AnilRedshift erwähnte Lösung, auf die ich jedoch näher eingehen werde.

Einfach ausgedrückt haben HTML-Attribute einen Namen und einen Wert. Als Abkürzung können Sie den Namen nur für "deaktiviert", "mehrfach" usw. verwenden. Die Langhandversion funktioniert jedoch weiterhin und ermöglicht es React, auf die bevorzugte Weise zu arbeiten.

disabled={disabled ? 'disabled' : undefined} ist die am besten lesbare Lösung.

Zuerst können Sie einfach überprüfen

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

Hinweis: ** deaktivierter Wert ist kein String, sondern sollte boolesch sein .

Nun zur Dynamik. Sie können einfach schreiben

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

Wie Sie sehen können, verwende ich die Eigenschaft disabled und in geschweiften Klammern kann es sich um eine lokale Variable / einen Status var handeln. Die Variable disableenthält die Werte true / false.

Dies könnte funktionieren, das Problem mit deaktiviert ist, dass man nicht einfach einen Booleschen Wert dafür festlegen kann.

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