如何使用react动态设置HTML5数据属性？

Question 1

我想呈现<select>输入的HTML5属性，以便可以将jquery图像选择器与react一起使用。我的代码是：

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

问题是即使{this.props.imageUrl}正确地以a形式传递prop，它也不会在HTML中呈现-只是呈现为{this.props.imageUrl}。如何使变量正确传递到HTML？

Question 2

您不应将JavaScript表达式用引号引起来。

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

查看JavaScript Expressions文档以获取更多信息。

Question 3

注意-如果要将数据属性传递给React组件，则需要对它们的处理方式与其他道具稍有不同。

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-属性和aria-属性特殊处理。在这两种情况下，允许在属性名称中使用连字符。