Как динамически установить атрибуты данных 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?

Ответ 1

Вы не должны включать выражения JavaScript в кавычки.

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

Взгляните на документы JavaScript Expressions для получения дополнительной информации.

Ответ 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- обрабатываются специально. Вам разрешено использовать дефисы в имени атрибута в этих двух случаях.