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

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

問題の説明:

HTML データを表示するときReactJS の AJAX 経由で取得すると、データは多くの場合、テキストではなくプレーン テキストとして表示されます。レンダリングされた HTML 要素。これは、クロスサイト スクリプティングの脆弱性を防ぐために HTML をエスケープする React のデフォルト動作によるものです。

解決策:

HTML 文字列を JSX に変換し、レンダリングされた HTML として表示するには要素では、dangerouslySetInnerHTML プロパティを使用できます。このプロパティを使用すると、要素の内部 HTML コンテンツを直接設定できます。

実装:

dangerouslySetInnerHTML プロパティを使用するには、以下を行う必要があります。これを、HTML コンテンツを文字列として含むオブジェクトにバインドします。このオブジェクトは次の構造を持つ必要があります:

{ __html: 'Your HTML content' }

ReactJS で dangerouslySetInnerHTML プロパティを使用する方法の例を次に示します:

import React, { useState } from 'react';

const MyComponent = () => {
  const [htmlContent, setHtmlContent] = useState('');

  const handleHtml = (data) => {
    setHtmlContent(data.html);
  };

  return (
    <div>
      <button onClick={() => handleHtml({ html: '<h1>Hello, React!</h1>' })}>Load HTML</button>
      <div dangerouslySetInnerHTML={{ __html: htmlContent }} />
    </div>
  );
};

export default MyComponent;

この例では、 dangerouslySetInnerHTML プロパティは、取得した HTML コンテンツをレンダリングするために使用されます。 handleHtml 関数から、レンダリングされた HTML 要素として使用されます。

注意:

dangerouslySetInnerHTML プロパティを使用すると、セキュリティ リスクが発生する可能性があります。 HTML コンテンツが適切にサニタイズされていない場合。このプロパティを使用する前に、レンダリングする HTML コンテンツが安全で信頼できることを必ず確認してください。

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