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

HTML 文字列を実際の HTML としてレンダリングする

React アプリケーションで、HTML コンテンツの文字列が次のようにレンダリングされるという問題に直面しています。適切な HTML マークアップの代わりにテキストを使用します。これを解決するには、次の点を理解することが重要です:

1. this.props.match.description は文字列ですか?
   文字列の場合は変換する必要があります問題なくHTMLに変換できます。文字列が二重引用符または一重引用符で適切に囲まれていることを確認してください。

2. HTML エンティティ:
   HTML 説明に特殊文字または HTML エンティティが含まれている場合は、次のことを行う必要があります。危険なほどSetInnerHTMLを使用する前に、それらをデコードしてください。これは、decodeEntities のような関数を使用して実行できます。

   decodeEntities(input) {
     var e = document.createElement('div');
     e.innerHTML = input;
     return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
   }

3. 使用法:
   実際の例を次に示します:

   class App extends React.Component {
     constructor() {
       super();
       this.state = {
         description: '<h1>

これらのヒントに従うことで、正常にレンダリングできるようになります。 React アプリケーション内の実際の HTML マークアップとしての HTML 文字列。

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