ホームページ >ウェブフロントエンド >jsチュートリアル >危険な方法でSetInnerHTMLを使用してReactでHTMLエンティティを実際のHTMLとして表示するにはどうすればよいですか?

危険な方法でSetInnerHTMLを使用してReactでHTMLエンティティを実際のHTMLとして表示するにはどうすればよいですか?

Barbara Streisand
Barbara Streisandオリジナル
2024-11-11 19:28:02472ブラウズ

How to Display HTML Entities as Real HTML in React using dangerouslySetInnerHTML?

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

React では、dangerlySetInnerHTML を使用して HTML コンテンツを実際の HTML として表示できます。ただし、この属性を文字列値とともに使用すると、問題が発生する可能性があります。

一般的なシナリオの 1 つは、this.props.match.description が HTML を含む文字列であるにもかかわらず、HTML ではなく文字列としてレンダリングされる場合です。これは、文字列内に HTML エンティティが存在する可能性があるために発生します。

これを解決するには、HTML エンティティを危険なほど SetInnerHTML に渡す前にデコードする必要があります。以下に例を示します:

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

以上が危険な方法でSetInnerHTMLを使用してReactでHTMLエンティティを実際のHTMLとして表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。