Wie setze ich HTML5-Datenattribute mithilfe von "Reagieren" dynamisch?

74

Ich möchte ein HTML5-Attribut einer <select>Eingabe rendern, damit ich jquery image picker mit react verwenden kann. Mein Code lautet:

var Book = React.createClass({
    render: function() {
        return (
            <option data-img-src="{this.props.imageUrl}" value="1">{this.props.title}</option>

Das Problem ist, dass es, obwohl {this.props.imageUrl}es ordnungsgemäß als übergeben propwird, nicht im HTML-Code gerendert wird, sondern nur als {this.props.imageUrl}. Wie kann ich die Variable richtig in den HTML-Code übertragen?

reactjs YPCrumble
quelle

Antworten:

90

Sie sollten JavaScript-Ausdrücke nicht in Anführungszeichen setzen.

<option data-img-src={this.props.imageUrl} value="1">{this.props.title}</option>

Weitere Informationen finden Sie in den JavaScript Expressions-Dokumenten .

Michelle Tilley
quelle
16
Beachten Sie außerdem, dass der Attributname (Daten-was auch immer) nur in Kleinbuchstaben angegeben werden muss.
Adam Loving
Ich habe einen Zweifel an Ihrer Antwort, für diesen Fall, wie Sie diesen data-img-src-Wert in js-Ereignissen erhalten können. Wenn wir einen Wert benötigen, können wir ihn durch e.target.value erhalten, aber wenn ich imageUrl benötige, wie ich ihn erhalte Das???
Praveenkumar
6
@praveenkumar Sie können über auf sie zugreifen e.target.dataset. Weitere Informationen finden Sie in der Dokumentation zum Dataset , in der Dokumentation zu Datenattributen und in diesem CodePen-Beispiel .
Michelle Tilley
22

Hinweis - Wenn Sie ein Datenattribut an eine Reaktionskomponente übergeben möchten, müssen Sie diese etwas anders behandeln als andere Requisiten.

2 Optionen

Verwenden Sie keinen Kamelkoffer

<Option data-img-src='value' ... />

Und dann müssen Sie in der Komponente aufgrund der Striche auf die Requisite in Anführungszeichen verweisen.

// @flow
class Option extends React.Component {

  props: {
    'data-img-src': string
  }

Und wenn Sie später darauf verweisen, verwenden Sie nicht die Punktsyntax

  render () {
    return (
      <option data-img-src={this.props['data-img-src']} >...</option>
    )
  }
}

Oder verwenden Sie Kamelkoffer

<Option dataImgSrc='value' ... />

Und dann müssen Sie in der Komponente konvertieren.

// @flow
class Option extends React.Component {

  props: {
    dataImgSrc: string
  }

Und wenn Sie später darauf verweisen, verwenden Sie nicht die Punktsyntax

  render () {
    return (
      <option data-img-src={this.props.dataImgSrc} >...</option>
    )
  }
}

Hauptsächlich nur realisieren, dass data-Attribute und aria-Attribute speziell behandelt werden. In diesen beiden Fällen dürfen Sie Bindestriche im Attributnamen verwenden.

Mark Swardstrom
quelle