Wie setze ich HTML5-Datenattribute dynamisch mit react?

Question

Ich möchte ein HTML5-Attribut einer <select> Eingabe rendern, so dass ich jquery Bildauswahl mit reagieren kann. Mein Code ist:

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

Das Problem ist, dass, obwohl {this.props.imageUrl} richtig als prop geführt zu werden, es ist nicht in der HTML-Rendering - es macht genauso {this.props.imageUrl}. Wie kann ich die Variable korrekt in den HTML-Code einfügen lassen?

Answer 1

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

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

Werfen Sie einen Blick auf the JavaScript Expressions docs für weitere Informationen.

Answer 2

Hinweis - Wenn Sie ein Datenattribut an eine React-Komponente übergeben möchten, müssen Sie diese ein wenig anders handhaben als andere Requisiten.

Sie können Kamel Fall

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

Und dann in der Komponente verwendet werden, da der Striche, müssen Sie in Anführungszeichen an der Stütze beziehen.

// @flow 
class Option extends React.Component { 

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

Und wenn Sie es später beziehen, können Sie nicht verwenden die Punktsyntax

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