我想呈现<select>输入的 HTML5 属性，以便我可以使用带有react的 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 中？
不应将 JavaScript 表达式括在引号中。
<option data-img-src={this.props.imageUrl} value="1">{this.props.title}</option>
查看JavaScript 表达式文档了解更多信息。
注意 - 如果您想将数据属性传递给 React 组件，您需要以与其他 props 稍有不同的方式处理它们。
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-属性被特殊对待。在这两种情况下，您可以在属性名称中使用连字符。