React.js で twemoji を使う

この前 Twitter から公開された絵文字ライブラリ twemoji を React.js でレンダリングされる DOM 内で使いたい場合。

var TwemojiedComponent = React.createClass({
    render: function () {
        var text = 'I \u2764\uFE0F emoji!';

        return (
          <span>{text}</span>
        );
    },

    componentDidMount: function () {
        twemoji.parse(this.getDOMNode(), { size: 72 });
    }
});

上記例だと render() 時点で text に対して twemoji.parse() すると JSX に埋め込む際にタグがエスケープされるというありがちな結果になってしまうので、mount 後にやる。

一応他の方法 (dangerouslySetInnerHTML) もあるものの、個人的には上のコードの方が分かりやすいと思う。なんかネーミングも危うさを強調している感じがするし。
http://facebook.github.io/react/docs/jsx-gotchas.html