Wie, um dynamische, className, element Reagieren Klasse render-Methode

Ich habe eine ReactClass mit dem Namen Alarm. Die render-Methode gibt ein div mit der Klasse alert alert-success oder alert alert-error nach der Art übergeben, während die Schaffung von element. Ich möchte nur wissen, wie Sie auf Klasse hinzufügen, basierend auf dem Typ der Warnung-element.

Hier ist mein Versuch:

var Alert = ReactClass({
  render: function() {
    return <div className="alert {this.props.type}">{this.props.message}</div>
  }
});

var successAlert = React.createElement(Alert, {
  type: 'alert-success'
  message: 'Information saved successfully!!'
});

Wenn JSX-Template kompiliert wird this.props.type ist nicht in der Klasse übergebene element. Wie dies zu erreichen ?

Verwenden className nicht class.
Danke @elclanrs. Es war ein Tippfehler, da schrieb ich den code im editor selbst.

InformationsquelleAutor sachinjain024 | 2016-03-04

  1. 5

    Sieht aus wie ich haben gefunden die Antwort auf meine Frage. Wir können einfach etwas wie das hier tun:

    var Alert = ReactClass({
  render: function() {
    return <div className={"alert " + this.props.type}>{this.props.message}</div>
  }
});

    Legen Sie einfach Ihren Klassen innerhalb von Template-Bewerter { } in diesem Fall. Erstellen Sie Ihre Klasse string basierend auf Ihre Requisiten und Staaten.

    Hoffe, das ist hilfreich für andere.

    InformationsquelleAutor sachinjain024

  2. 1

    Einen Weg, dies zu erreichen, haben Sie eine Zeichenfolge, die enthält alle Klassen und legen Sie diese dann auf die Komponente className:

    var Alert = ReactClass({

  var yourClassName = 'alert ';

  //Add any additional class names
  yourClassName += this.props.type + ' ';

  render: function() {
    return <div className={yourClassName}>{this.props.message}</div>
  }
});

    oder alternativ können Sie Ihre Klasse Namen in ein array und wandelt es in eine Klasse freundlich-Zeichenfolge, wenn Sie bereit sind, es zu benutzen:

    var Alert = ReactClass({

  var yourClassArray = [];

  //Add any additional class names
  yourClassArray.push('alert');
  yourClassArray.push(this.props.type);

  var classString = yourClassArray.join(' ');

  render: function() {
    return <div className={classString}>{this.props.message}</div>
  }
});
    Vielen Dank für die Anregung. Ich wusste, dass dieser Ansatz aber das sieht nicht sehr nett zu mir. Weil die meisten der Zeit, die Ihre template-Logik enthalten Bedingungen wie if/else-Anweisung im Attribut "className". Ich bin meist LENKER Benutzer, wo es ist so einfach, diese Dinge zu erreichen.

    InformationsquelleAutor Nick Zuber

  3. 0

    Werfen Sie einen Blick auf die Klassennamen Paket. Sie tun Sachen wie diese:

    className={classNames('alert', `alert-${type}`)}

    oder

    className={classNames({
    'alert': true,
    'alert-success': success,
    'alert-error': error
})

    InformationsquelleAutor David L. Walsh

  4. 0

    Können Sie JavaScript verwenden, Vorlage Literale 

    var Alert = ReactClass({
  render: function() {
    return <div className={`alert ${this.props.type}`}>{this.props.message}</div>
  }
});

    Ihren code geschrieben werden kann in der folgenden Weise:

    const Alert = ({type, message}) =>
    <div className={`alert ${type}`}>{message}</div>

    InformationsquelleAutor Vlad Bezden

Schreibe einen Kommentar