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

我想渲染一个 HTML5 属性<select>输入，以便我可以将 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}正在被正确地传递为prop，它不会在 HTML 中呈现 - 它只是呈现为{this.props.imageUrl}。如何使变量正确传递到 HTML 中？

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

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

看一眼JavaScript 表达式文档 http://facebook.github.io/react/docs/jsx-in-depth.html#javascript-expressions了解更多信息。