如何使用 react 动态设置 HTML5 数据属性? [英] How do I dynamically set HTML5 data- attributes using react?

问题描述

我想呈现 <select> 输入的 HTML5 属性，以便我可以使用带有反应的 jquery 图像选择器.我的代码是:

I'd like to render an HTML5 attribute of a <select> input so that I can use jquery image picker with react. My code is:

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

The issue is that even though {this.props.imageUrl} is getting properly passed as a prop, it isn't rendering in the HTML - it just renders as {this.props.imageUrl}. How can I make the variable pass through properly into the HTML?

推荐答案

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

You should not wrap JavaScript expressions in quotes.

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

查看JavaScript 表达式文档了解更多信息.

这篇关于如何使用 react 动态设置 HTML5 数据属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！