[解決済み] 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 のドキュメントを参照してください。 を参照してください。
関連
-
[解決済み] ReactJS: Warning: setState(...): 既存の状態遷移の間に更新することはできません
-
[解決済み] eslint: no-case-declaration - case ブロックで予期しない字句の宣言があった。
-
[解決済み] AxiosにCORSの問題が発生
-
[解決済み] Reactルータを使ったプログラムによるナビゲーション
-
[解決済み] Reactコンポーネントに条件付きで属性を追加するにはどうすればよいですか?
-
[解決済み] レンダリング後に入力フィールドにフォーカスを設定するには?
-
[解決済み] React / React Nativeでコンストラクタを使用する場合とgetInitialStateを使用する場合の違いとは何ですか?
-
[解決済み] useEffect React Hook使用時の依存性欠如の警告を修正する方法
-
[解決済み】React Jsでクラス属性を条件付きで適用する。
-
[解決済み] Retrieving value from <select> with multiple option in React
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】無効な設定オブジェクトです。APIスキーマと一致しない設定オブジェクトを使用してWebpackが初期化されました。
-
[解決済み】Reactを使用したMapBoxのCSSが欠落している件
-
[解決済み] Webpack + Babelです。プリセット "es2015 "がディレクトリに相対して見つからなかった
-
[解決済み] React + TypeScript のエラーです。この呼び出しにマッチするオーバーロードがありません
-
[解決済み] リアクトです。<tr>は<td>の子として表示できません。コメント > td > tr を参照してください。
-
[解決済み] React TypeScriptで作業しているときに、Jestが予期しないトークンに遭遇した
-
[解決済み] アクシオスは定義されていません
-
[解決済み] React QueryとReduxの主な違いは何ですか?
-
[解決済み] componentDidUpdate'メソッドはいつ使用するのですか?
-
[解決済み] Reactでグローバル変数を宣言する方法とは?