危険な方法で SetInnerHTML を使用して React で HTML 文字列を安全にレンダリングする方法

HTML 文字列を HTML として安全にレンダリングする

このシナリオでは、HTML コンテンツの通常の文字列をレンダリングしようとすると問題が発生しますが、代わりに、HTML として解釈されずに文字列として表示されます。これは通常、dangerouslySetInnerHTML で使用されているプロパティが文字列ではなくオブジェクトである場合に発生します。

これを解決するには、this.props.match.description プロパティが文字列であることを確認してください。そうでない場合は、プロパティに割り当てる前に HTML に変換します。

HTML エンティティの処理

HTML エンティティを処理する場合、さらに複雑な問題が発生します。このような場合、エンティティを危険なほどSetInnerHTMLに渡す前にデコードする必要があります。

コード例

次のコード例を考えてみましょう:

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      description: '<p><strong>Our Opportunity:</strong></p>',
    };
  }

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

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

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

この例では、description プロパティに HTML エンティティ (< および >) が含まれています。正しくレンダリングするために、htmlDecode 関数を使用してこれらのエンティティをデコードしてから、HTML を危険なほど SetInnerHTML に渡します。

以上が危険な方法で SetInnerHTML を使用して React で HTML 文字列を安全にレンダリングする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。