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

reactjs React.js

神乐前端

2020-03-18

我想呈现<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?

第2040篇《如何使用react动态设置HTML5数据属性?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

1个回答
乐ASam 2020.03.18

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

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

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android