1. ホーム
  2. reactjs

[解決済み] reactを使ってHTML5のdata-属性を動的に設定するには?

2023-03-27 02:06:16

質問

のHTML5属性をレンダリングしたい。 <select> のHTML5属性をレンダリングして、reactでjquery image pickerを使えるようにしたいです。私のコードは、次のとおりです。

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 Expressions のドキュメントを参照してください。 を参照してください。