Jak dynamicznie ustawiać atrybuty danych HTML5 za pomocą reakcji?

Question

Chciałbym renderować atrybut HTML5 wejścia <select>, tak aby można było użyć selektora obrazu jquery z reakcją. Mój kod to:

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

Kwestia jest taka, że ​​chociaż {this.props.imageUrl} jest uzyskiwanie prawidłowo przekazany jako prop, nie jest renderowanie w HTML - to tylko świadczy jak {this.props.imageUrl}. Jak sprawić, aby zmienna przechodziła poprawnie do kodu HTML?

Answer 1

Nie powinieneś zawijać wyrażeń JavaScript w cudzysłowach.

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

Aby uzyskać więcej informacji, zobacz the JavaScript Expressions docs.

Answer 2

Uwaga: jeśli chcesz przekazać atrybut danych do komponentu odpowiedzi, musisz traktować je trochę inaczej niż inne rekwizyty.

Nie używać camel sprawa

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

a następnie w składniku, ponieważ z kresek, trzeba zapoznać się z rekwizytem w cudzysłowach.

// @flow 
class Option extends React.Component { 

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

A kiedy się do niego później, aby nie używać składni dot

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