Wie füge ich React-Komponenten bedingt Attribute hinzu?

Gibt es eine Möglichkeit, einer React-Komponente nur Attribute hinzuzufügen, wenn eine bestimmte Bedingung erfüllt ist?

Ich sollte erforderliche und readOnly-Attribute hinzufügen, um Elemente zu bilden, die auf einem Ajax-Aufruf nach dem Rendern basieren, aber ich kann nicht sehen, wie dies gelöst werden kann, da readOnly = "false" nicht dasselbe ist wie das vollständige Weglassen des Attributs.

Das folgende Beispiel sollte erklären, was ich will, aber es wird nicht funktionieren (Analysefehler: Unerwarteter Bezeichner).

var React = require('React');

var MyOwnInput = React.createClass({
    render: function () {
        return (
            <div>
                <input type="text" onChange={this.changeValue} value={this.getValue()} name={this.props.name}/>
            </div>
        );
    }
});

module.exports = React.createClass({
    getInitialState: function () {
        return {
            isRequired: false
        }
    },
    componentDidMount: function () {
        this.setState({
            isRequired: true
        });
    },
    render: function () {
        var isRequired = this.state.isRequired;

        return (
            <MyOwnInput name="test" {isRequired ? "required" : ""} />
        );
    }
});

Anscheinend ist React für bestimmte Attribute intelligent genug, um das Attribut wegzulassen, wenn der Wert, den Sie an ihn übergeben, nicht wahr ist. Zum Beispiel:

var InputComponent = React.createClass({
    render: function() {
        var required = true;
        var disabled = false;

        return (
            <input type="text" disabled={disabled} required={required} />
        );
    }
});

wird darin enden, dass:

<input type="text" required>

Update: Wenn jemand neugierig ist, wie / warum dies geschieht, finden Sie Details im ReactDOM-Quellcode, insbesondere in den Zeilen 30 und 167 der Datei DOMProperty.js .

Die Antwort von juandemarco ist normalerweise richtig, aber hier ist eine andere Option.

Erstellen Sie ein Objekt, wie Sie möchten:

var inputProps = {
  value: 'foo',
  onChange: this.handleChange
};

if (condition)
  inputProps.disabled = true;

Mit Spread rendern, optional auch andere Requisiten weitergeben.

<input
    value="this is overridden by inputProps"
    {...inputProps}
    onChange={overridesInputProps}
 />

Hier ist ein Beispiel der Verwendung von Bootstrap ‚s Buttonüber React-Bootstrap (Version 0.32.4):

var condition = true;

return (
  <Button {...(condition ? {bsStyle: 'success'} : {})} />
);

Je nach Zustand wird entweder {bsStyle: 'success'}oder {}zurückgegeben. Der Spread-Operator verteilt dann die Eigenschaften des zurückgegebenen Objekts auf die ButtonKomponente. Im falschen Fall wird nichts an die Komponente übergeben, da für das zurückgegebene Objekt keine Eigenschaften vorhanden sind.

Ein alternativer Weg basierend auf Andy Polhills Kommentar :

var condition = true;

return (
  <Button bsStyle={condition ? 'success' : undefined} />
);

Der einzige kleine Unterschied ist , dass bei dem zweiten Beispiel der innere Komponente <Button/>ist propsAufgabe , einen Schlüssel wird bsStylemit einem Wert von undefined.

Hier ist eine Alternative.

var condition = true;

var props = {
  value: 'foo',
  ...( condition && { disabled: true } )
};

var component = <div { ...props } />;

Oder seine Inline-Version

var condition = true;

var component = (
  <div
    value="foo"
    { ...( condition && { disabled: true } ) } />
);

Hier ist eine Möglichkeit, wie ich es mache.

Mit einer Bedingung :

<Label
    {...{
      text: label,
      type,
      ...(tooltip && { tooltip }),
      isRequired: required
    }}
/>

Ich bevorzuge es immer noch, Requisiten regelmäßig weiterzugeben, da sie (meiner Meinung nach) besser lesbar sind, wenn keine Bedingungen vorliegen.

Ohne Bedingung :

<Label text={label} type={type} tooltip={tooltip} isRequired={required} />

Sie können dieselbe Verknüpfung verwenden, mit der (Teile von) Komponenten ( {isVisible && <SomeComponent />}) hinzugefügt / entfernt werden .

class MyComponent extends React.Component {
  render() {
    return (
      <div someAttribute={someCondition && someValue} />
    );
  }
}

Angenommen, wir möchten eine benutzerdefinierte Eigenschaft hinzufügen (mit aria- * oder data- *), wenn eine Bedingung erfüllt ist:

{...this.props.isTrue && {'aria-name' : 'something here'}}

Angenommen, wir möchten eine Stileigenschaft hinzufügen, wenn eine Bedingung erfüllt ist:

{...this.props.isTrue && {style : {color: 'red'}}}

Wenn Sie ECMAScript 6 verwenden, können Sie einfach so schreiben.

// First, create a wrap object.
const wrap = {
    [variableName]: true
}
// Then, use it
<SomeComponent {...{wrap}} />

Dies sollte funktionieren, da sich Ihr Status nach dem Ajax-Aufruf ändert und die übergeordnete Komponente erneut gerendert wird.

render : function () {
    var item;
    if (this.state.isRequired) {
        item = <MyOwnInput attribute={'whatever'} />
    } else {
        item = <MyOwnInput />
    }
    return (
        <div>
            {item}
        </div>
    );
}

In React können Sie Komponenten, aber auch deren Attribute wie Requisiten, Klassenname, ID und mehr bedingt rendern.

In React ist es sehr empfehlenswert, den ternären Operator zu verwenden Sie Komponenten bedingt rendern können.

Ein Beispiel zeigt auch, wie Komponenten und ihr Stilattribut bedingt gerendert werden.

Hier ist ein einfaches Beispiel:

class App extends React.Component {
  state = {
    isTrue: true
  };

  render() {
    return (
      <div>
        {this.state.isTrue ? (
          <button style={{ color: this.state.isTrue ? "red" : "blue" }}>
            I am rendered if TRUE
          </button>
        ) : (
          <button>I am rendered if FALSE</button>
        )}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

In Anbetracht des Post JSX In Depth können Sie Ihr Problem folgendermaßen lösen:

if (isRequired) {
  return (
    <MyOwnInput name="test" required='required' />
  );
}
return (
    <MyOwnInput name="test" />
);