5

次のように、数行のhtmlを返す関数があります。

render: function() {
  var badges = user.get('achievements').badges.map(function(badge) {
    var str = '<h3><span className="fa fa-fw '

    switch(badge.id) {
    case '0':
      str += ('fa-briefcase"></span><small>' + badge.text + '</small></h3>')
      break;
    case '1':
      str += ('fa-shopping-cart"></span><small>' + badge.text + '</small></h3>')
      break;
    ...
    }

    return str;
  });

  return (
    <div className="pull-right">
      {badges}
    </div>
  );
}

これを行うと、文字列はページ上にテキストとして表示されます。

<h3><span className="fa fa-fw fa-briefcase"></span><small>Visionary</small></h3><h3><span className="fa fa-fw fa-shopping-cart"></span><small>Active</small></h3><h3><span className="fa fa-fw fa-sitemap"></span><small>Lorem</small></h3><h3><span className="fa fa-fw fa-tasks"></span><small>Ipsum</small></h3><h3><span className="fa fa-fw fa-signal"></span><small>Dolor</small></h3><h3><span className="fa fa-fw fa-check-square"></span><small>Amet;</small></h3>

適切な HTML としてレンダリングするにはどうすればよいですか?

4

2 に答える 2

5

使用dangerouslySetInnerHTMLは機能しますが、マークアップを制御しているため、この場合は使用を避けることをお勧めします。その属性dangerouslyには理由があります。これらのバッジは、コード インジェクションのベクターになっています。

render() {
    const BADGE_ID_TO_ICON_CLASS_NAME = {
      '0': 'fa-briefcase',
      '1': 'fa-shopping-cart',
      ...
    };

    return (
      <div className="pull-right">
        {user.get('achievements').badges.map(badge => (
          <h3 key={badge.id}>
            <span
              className={`fa fa-fw ${BADGE_ID_TO_ICON_CLASS_NAME[badge.id]}`}
            />
            <small>{badge.text}</small>
          </h3>
        ))}
      </div>
    );
}
于 2014-05-12T15:18:53.673 に答える
3

だから私は自分で答えを見つけました：dangerouslySetInnerHTML={{__html: badges}この結果を達成するために使用する必要があります。

そう：

<div className="pull-right" dangerouslySetInnerHTML={{__html: badges}}></div>

トリックをしました。それが役に立てば幸い。

于 2014-05-12T07:12:55.257 に答える