[解決済み】ReactJSでHTMLの文字列をJSXに変換する。
2022-04-03 13:09:42
質問
facebookのReactJSの扱いに困っています。ajaxしてhtmlデータを表示したいのに、ReactJSではテキストで表示されてしまう。(下図参照)
jquery Ajaxのsuccessコールバック関数によりデータを表示します。
$.ajax({
url: url here,
dataType: "json",
success: function(data) {
this.setState({
action: data.action
})
}.bind(this)
});
<イグ
これを簡単にhtmlに変換する方法はないでしょうか?ReactJSを使ってどのようにすればいいのでしょうか?
どのように解決するのですか?
デフォルトでは、ReactはHTMLをエスケープして
XSS (クロスサイトスクリプティング)
. どうしてもHTMLをレンダリングしたい場合は
dangerouslySetInnerHTML
プロパティを使用します。
<td dangerouslySetInnerHTML={{__html: this.state.actions}} />
Reactでは、テキストを誤ってHTMLとしてレンダリングしてXSSバグを発生させないために、意図的にこの面倒な構文を強制しています。
関連
-
[解決済み】WebpackとBabelで「このファイルタイプを扱うには適切なローダーが必要な場合があります。
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] JavaScriptで空文字列/未定義文字列/null文字列をチェックするにはどうすればよいですか?
-
[解決済み] JavaScriptで文字列をbooleanに変換するにはどうしたらいいですか?
-
[解決済み] Microsoft JSONの日付はどのようにフォーマットするのですか?
-
[解決済み] JavaScriptで文字列を整数に変換する方法は?
-
[解決済み] jQueryでフォームデータをJavaScriptオブジェクトに変換する
-
[解決済み] React JSX内のループ
-
[解決済み】JavaScriptで文字列の出現箇所をすべて置換する方法
-
[解決済み】オブジェクトの配列を文字列のプロパティ値でソートする
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Failed to load resource: net::ERR_FILE_NOT_FOUND loading json.js
-
[解決済み] Uncaught TypeError: 未定義のプロパティ 'top' を読み込めない
-
[解決済み】Angular JS Uncaught Error。[インジェクター:モジュラー]。
-
[解決済み】webpack-dev-serverにリモート接続すると、「Invalid Host header」というメッセージが表示されます。
-
[解決済み】webpack: モジュールが見つかりません。Error: 解決できない(相対パスで)
-
[解決済み】ある要素を別の要素に移動させるには?
-
[解決済み】Reactのeslintエラーはpropsの検証で見つからない
-
[解決済み】FirefoxでGoogle Maps V3をリモートで使用すると「googleが定義されていません」と表示される。
-
[解決済み】TypeError: res.status は関数ではありません。
-
[解決済み】Reactの変数文(JSX)でHTMLを挿入する【重複あり