なつねこメモ

2016/01/07

React.js で、HTML を描画したい

最近、 React.js + Electron + TypeScript で、アプリを作っているのですが、
render() の中の React Component で、生の HTML を扱うことが発生したので、
やり方を書いておきます。

---

通常通りに値を渡すと、エスケープされて、 <p> hoge </p> といったように、
表示されますが、dangerouslySetInnerHTML を使うことで、
生の HTML で描画することが可能です。

DOM Elements – React

ただ、 XSS が発生する可能性が出てくるので、使用には注意が必要です。
実際に使うと、こんな感じ。

chat_message.ts
/// <reference path="./typings/tsd.d.ts" />

import * as React from 'react';

interface IChatMessagesProps {
  htmlMessage: string;
}

export class ChatMessage extends React.Component<IChatMessagesProps, any> {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div className="comment">
        <div className="content">
          <a className="author">Jack</a>
          <div className="text" dangerouslySetInnerHTML={{__html: this.props.message}}>
          </div>
        </div>
      </div>
    );
  }
}

ではでは