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

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

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

HTML エンティティの処理

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

コード例

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

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

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

  render() {
    return (
      

    );
  }
}

ReactDOM.render(, document.getElementById('root'));

この例では、description プロパティに HTML エンティティ () が含まれています。正しくレンダリングするには、HTML を危険なほど SetInnerHTML.