Ответ 1
Вы не должны включать выражения JavaScript в кавычки.
<option data-img-src={this.props.imageUrl} value="1">{this.props.title}</option>
Взгляните на документы JavaScript Expressions для получения дополнительной информации.
Как динамически установить атрибуты данных HTML5, используя реакцию?
Я бы хотел отобразить HTML5-атрибут ввода <select>, чтобы я мог использовать jquery image picker с реакцией. Мой код:
var Book = React.createClass({
render: function() {
return (
<option data-img-src="{this.props.imageUrl}" value="1">{this.props.title}</option>
Проблема в том, что даже если {this.props.imageUrl} правильно передается как prop, это не рендеринг в HTML - он просто отображается как {this.props.imageUrl}. Как я могу заставить переменную правильно пройти в HTML?
Ответы
Ответ 2
Примечание - если вы хотите передать атрибут данных в React Component, вам нужно обрабатывать их немного иначе, чем другие реквизиты.
2 варианта
Не используйте чехол для верблюда
<Option data-img-src='value' ... />
И затем в компоненте, из-за тире, вы должны ссылаться на реквизит в кавычках.
// @flow
class Option extends React.Component {
props: {
'data-img-src': string
}
И когда вы обращаетесь к нему позже, вы не используете точечный синтаксис
render () {
return (
<option data-img-src={this.props['data-img-src']} >...</option>
)
}
}
Или используйте случай верблюда
<Option dataImgSrc='value' ... />
И тогда в компоненте нужно конвертировать.
// @flow
class Option extends React.Component {
props: {
dataImgSrc: string
}
И когда вы обращаетесь к нему позже, вы не используете точечный синтаксис
render () {
return (
<option data-img-src={this.props.dataImgSrc} >...</option>
)
}
}
В основном, просто осознайте, data- атрибуты data- и aria- обрабатываются специально. Вам разрешено использовать дефисы в имени атрибута в этих двух случаях.