☰

React で生の HTML をレンダリングするにはどうすればいいですか? 質問する

tag-icon • tag-icon javascript reactjs
React で生の HTML をレンダリングするにはどうすればいいですか? 質問する

では、これが reactjs で生の HTML をレンダリングする唯一の方法なのでしょうか?

// http://facebook.github.io/react/docs/tutorial.html
// tutorial7.js
var converter = new Showdown.converter();
var Comment = React.createClass({
  render: function() {
    var rawMarkup = converter.makeHtml(this.props.children.toString());
    return (
      <div className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
        <span dangerouslySetInnerHTML={{__html: rawMarkup}} />
      </div>
    );
  }
});

JSX でマークアップするクールな方法がいくつかあることは知っていますが、私が主に関心があるのは、生の HTML (すべてのクラス、インライン スタイルなどを含む) をレンダリングできることです。次のような複雑なもの:

<!-- http://getbootstrap.com/components/#dropdowns-example -->
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>

これらすべてを JSX で書き直す必要はありません。

おそらく私はこれについて全く間違った考えを持っているのでしょう。訂正してください。

ベストアンサー1

HTMLをレンダリングするためのより安全な方法があります。これについては以前の回答で説明しました。ここ4 つのオプションがあり、最後のオプションでは を使用しますdangerouslySetInnerHTML。

HTML をレンダリングする方法

  1. 最も簡単な方法- Unicode を使用し、ファイルを UTF-8 として保存し、をcharsetUTF-8 に設定します。

    <div>{'First · Second'}</div>

  2. より安全- Javascript 文字列内のエンティティには Unicode 番号を使用します。

    <div>{'First \u00b7 Second'}</div>

    または

    <div>{'First ' + String.fromCharCode(183) + ' Second'}</div>

  3. または、文字列と JSX 要素の混合配列。

    <div>{['First ', <span>&middot;</span>, ' Second']}</div>

  4. 最後の手段- を使用して生の HTML を挿入しますdangerouslySetInnerHTML。

    <div dangerouslySetInnerHTML={{__html: 'First &middot; Second'}} />

おすすめ記事