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

Question

我想渲染<select>输入的HTML5属性,以便我可以使用jquery图像选择器进行反应.我的代码是:

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中？

Answer 1

您不应该将JavaScript表达式包装在引号中.

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

有关详细信息,请查看JavaScript表达式文档.

Answer 2

注意 - 如果要将数据属性传递给React组件,则需要处理它们与其他道具略有不同.

2个选项

不要使用驼峰盒

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

然后在组件中,由于破折号,您需要引用引号中的prop.

// @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-属性的特殊处理.