1. ホーム
  2. ジャバスクリプト

[解決済み】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バグを発生させないために、意図的にこの面倒な構文を強制しています。