ReactでHTMLタグを正しくレンダリングする

Question

Reactでテキストモジュールを作成する必要があります。私もJSXを使用しています。私はJSONファイルからデータを受け取ります。私は私のモジュールにこのような何かをしようとした

{ "text-data": "text": "<small> Hello world </small>" }

：たとえば、私は私のJSXファイルでこれをレンダリングしようとすると、タグ付きのプレーンテキストが含まれる <p> {this.props.textData.text}</p>

は、それが表示されます。私は研究していましたが、この機能を「危険なinnerHTMLを設定」することができましたが、XSS攻撃を引き起こす可能性があるため推奨されていません。私はここで他の答えを読んで、それはHTMLエンティティを使用して動作すると言う、今はその仕事をすることはできません。

Answer 1

dangerouslySetInnerHTMLこのような場合があります。実際には、が完全にと出力していて、それが有効なhtmlだと言っています。ユーザーの入力に使用することは望ましくありません（絶対に必要でなく、完全に検証されている場合を除きます）。

詳細については、React documentationを参照してください。以前の同様のStackOverflow questionもあります。