React で HTML 文字列を適切にレンダリングするにはどうすればよいですか?-jsチュートリアル-php.cn

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

Patricia Arquette

リリース： 2024-11-15 22:45:03

オリジナル

326 人が閲覧しました

How to Properly Render HTML Strings in React?

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

HTML コンテンツを実際の HTML として表示しようとすると、特定のシナリオでは、文字列がHTML として解釈されるのではなく、テキストとしてレンダリングされます。この問題に対処するには、HTML 文字列を二重引用符で囲み、必要に応じてデコードすることが重要です。

これを解決する 1 つの方法は、次のように、dangerlySetInnerHTML プロパティ内で HTML 文字列を二重引用符で囲むことです。次の例で示します:

<div dangerouslySetInnerHTML={{ __html: '" <h1>Hi there!</h1>" ' }} />

ログイン後にコピー

ただし、HTML 文字列がオブジェクトとして保存されている場合、HTML としてレンダリングされません。このような場合、オブジェクトは、dangerlySetInnerHTML に割り当てる前に文字列に変換する必要があります。

class App extends React.Component {

constructor() {
    super();
    this.state = {
      description: {
        children: "something",
        style: {
          color: "red"
        }
      }
    }
  }
  
  render() {
    return (
      <div dangerouslySetInnerHTML={{ __html: JSON.stringify(this.state.description) }} />
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

ログイン後にコピー

さらに、HTML 文字列内の HTML エンティティを扱う場合は、dangerlySetInnerHTML に割り当てる前にエンティティをデコードすることが重要です。。これは、htmlDecode 関数を使用して実現できます:

class App extends React.Component {

  constructor() {
    super();
    this.state = {
      description: '<p>&amp;lt;strong&amp;gt;Our Opportunity:&amp;lt;/strong&amp;gt;</p>'
    }
  }

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

  render() {
    return (
      <div dangerouslySetInnerHTML={{ __html: this.htmlDecode(this.state.description) }} />
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

ログイン後にコピー

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