ReactJS で HTML 文字列を JSX として安全にレンダリングするにはどうすればよいですか?

HTML 文字列を ReactJS JSX に変換する

ReactJS では、AJAX リクエストから取得した HTML データを表示すると、通常はデータがレンダリングされるため、問題が発生する可能性があります。テキストとして。この問題を克服して HTML コンテンツを表示するために、ReactJS は解決策を提供します。

解決策：dangerlySetInnerHTML

ReactJS には、HTML をそのままレンダリングできるようにする、dangerlySetInnerHTML と呼ばれる特別なプロパティが含まれています。 。ただし、このプロパティは React の組み込み XSS (クロスサイト スクリプティング) 保護をバイパスするため、注意して使用します。

dangerlySetInnerHTML を使用するには、HTML データを値として渡すだけです:

<td dangerouslySetInnerHTML={{__html: this.state.actions}} />

カスタマイズ

レンダリングされた HTML を変更したい場合どのような方法でも、react-html-parser や react-dom-parser などのコンポーネントを使用できます。これらのコンポーネントを使用すると、HTML データを ReactJS アプリで表示する前に解析および変更できます。

セキュリティに関する考慮事項

dangerlySetInnerHTML は絶対に使用する必要がある場合にのみ使用する必要があることに注意してください。必要。不適切に使用すると、XSS の脆弱性が発生する可能性があります。悪意のあるコードから保護するには、レンダリングされる前に HTML データがサニタイズされ、検証されていることを確認してください。

以上がReactJS で HTML 文字列を JSX として安全にレンダリングするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。