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

React を使用した HTML 文字列の HTML としてのレンダリング

React では、HTML 文字列を実際の HTML コンテンツとしてレンダリングする必要がある状況によく遭遇します。試行によっては、文字列が HTML ではなく文字列として表示される場合がありますが、目的の結果を達成するために採用できるアプローチがいくつかあります。

1 つの方法は、HTML 要素の作成時に、dangerlySetInnerHTML プロパティを使用することです。このプロパティを使用すると、生の HTML をコンポーネントに挿入できます。たとえば、

を含む HTML 文字列があるとします。要素では、次の構文を使用できます。

<div dangerouslysetinnerhtml="{{" __html:>Hi there!" }} /><p>これにより、</p>
<h1 id="がレンダリングされます-要素を-DOM-に適切に追加します-ただし-dangerlySetInnerHTML-に渡す文字列は-セキュリティ上の理由から常にサニタイズする必要があることに注意することが重要です"> がレンダリングされます。要素を DOM に適切に追加します。ただし、dangerlySetInnerHTML に渡す文字列は、セキュリティ上の理由から常にサニタイズする必要があることに注意することが重要です。</h1>
<p>this.props.match.description が HTML としてレンダリングされない特定のケースでは、次のことを試すことができます。以下:</p>
<ol>
<li>
<strong>タイプを確認してください:</strong> this.props.match.description はオブジェクトではなく文字列です。オブジェクトの場合は、文字列に変換する必要がある可能性があります。</li>
<li>
<strong>適切なマークアップを確認します:</strong> 文字列が実際に文字列である場合は、潜在的なマークアップの問題がないか検査します。すべてのタグが適切に閉じられていること、およびレンダリングを妨げる可能性のある文字エンティティがないことを確認してください。</li>
<li>
<strong>HTML エンティティをデコードする:</strong> HTML エンティティを処理している場合は、次のことが必要になる場合があります。それらをdangerlySetInnerHTMLに渡す前にデコードする必要があります。これを実現するには、htmlDecode などの関数を使用できます。</li>
</ol>
<p>これらの手順を実装すると、React アプリケーションで HTML 文字列を実際の HTML として正常にレンダリングできるようになります。ただし、dangerouslySetInnerHTML プロパティを使用する前に入力をサニタイズして、セキュリティを優先することが常に重要です。</p>
</div>

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