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

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?

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 .

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.