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}被正确传递为prop，它也不会在HTML中呈现 - 它只是呈现为{this.props.imageUrl}。如何让变量正确地传递到HTML？

Answer 1

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

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

请查看the JavaScript Expressions docs了解详情。

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-属性是专门处理的。

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

2 个答案: