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

我想渲染一个<select>输入的HTML5属性，以便我可以使用jQuery图像选取器进行反应。我的代码是：如何使用反应动态设置HTML5数据属性？

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进入？

来源

2014-12-04 YPCrumble

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

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

看看the JavaScript Expressions docs获取更多信息。

来源

2014-12-04 04:41:01

+12

此外，请注意，属性名（数据等等）必须全部小写。 – 2016-03-24 17:20:34

我对你的回答有一个疑问，对于这种情况，你如何在任何js事件中获得data-img-src值。如果我们需要一个值，我们可以通过e.target.value得到，但是如果我需要imageUrl，我将如何懂吗？？？ – praveenkumar 2017-11-28 10:49:34

@praveenkumar你可以通过'e.target.dataset'访问它们。请参阅[数据集文档]（https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset），[数据属性文档]（https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes）和[此CodePen示例]（https://codepen.io/BinaryMuse/pen/jaQVQM）。 – 2017-11-29 21:13:09

注意 - 如果你想传递一个数据属性到一个React组件，你需要处理它们与其他道具稍有不同。

不要使用骆驼情况

<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> 
    ) 
    } 
}

来源

2017-11-14 18:31:49 Swards

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

回答

相关问题