HTML 文字列を実際の HTML としてレンダリングするにはどうすればよいでしょうか? 質問する

Question

文字列ですかthis.props.match.description、それともオブジェクトですか? 文字列の場合は、問題なく HTML に変換されるはずです。例:

class App extends React.Component {

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

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

結果：http://codepen.io/ilanus/pen/QKgoLA?editors=1011

ただし、説明に<h1 style="color:red;">something</h1>引用符がない場合''、次のようになります。

Object {
$$typeof: [object Symbol] {},
  _owner: null,
  key: null,
  props: Object {
    children: "something",
    style: "color:red;"
  },
  ref: null,
  type: "h1"
}

文字列であり、HTML マークアップが表示されない場合、私が見つけた唯一の問題はマークアップが間違っていることです。

アップデート

HTML エンティティを扱う場合は、送信する前にデコードする必要があります。dangerouslySetInnerHTMLこれが「危険」と呼ばれる理由です :)

動作例:

class App extends React.Component {

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

   htmlDecode(input){
    var 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'));

Answer 1