ReactでHTMLをレンダリングする方法

Reactを使用して、エスケープせずにDOMでHTML文字列をレンダリングする方法を確認してください

私はこの問題を抱えていました-WYSIWYGエディターから来るReactアプリケーションにHTML文字列を追加する必要がありましたが、単に追加するだけです{myString}JSXHTMLをエスケープしていたので、HTMLタグがユーザーに表示されました。

どうやってそれを解決したのですか?基本的に2つの解決策を見ました。最初のネイティブ、2番目のネイティブにはライブラリが必要でした。

最初の解決策:使用dangerouslySetInnerHTML

あなたは使用することができますdangerouslySetInnerHTMLコンテンツ内にHTML文字列を追加するためのHTML要素の属性:

<div
  dangerouslySetInnerHTML={{
    __html: props.house.description
  }}></div>

それが呼ばれることを忘れないでください危険なほど理由があります。この場合、HTMLはまったくエスケープされないため、XSS問題。

しかし、これには良いユースケースがあります。

2番目の解決策:サードパーティのライブラリを使用する

機能を実装する多くのライブラリがありますdangerouslySetInnerHTMLより簡単な方法で提供します。

それらの1つはreact-html-parser図書館。

GitHubのライブラリを参照してください。https://github.com/wrakky/react-html-parser

警告:執筆時点では、過去2年間更新されていないため、将来的に問題が発生する可能性があります。それは私のために働いた。

どちらを使用しますか?

他の同様のライブラリを探すこともできますが、最終的にはdangerouslySetInnerHTML仕方。

この危険な名前は、ユーザーがそのHTML文字列に入力できるようにしたHTMLタグを正しくホワイトリストに登録することに注意を払うための組み込みのリマインダーでした。

私の無料ダウンロードReactハンドブック


その他の反応チュートリアル: