みかづきメモ

学習したことのメモとか、日記とか、備忘録。

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

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


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

facebook.github.io

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

// @ chat_message.ts

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

import * as React from 'react';

interface IChatMessagsProps {
  htmlMessage: string;
}

export class ChatMessage extends React.Component<IChatMessagsProps, 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>
    );
  }
}

ではでは