2016/01/07
最近、 React.js + Electron + TypeScript で、アプリを作っているのですが、
render()
の中の React Component で、生の HTML を扱うことが発生したので、
やり方を書いておきます。
通常通りに値を渡すと、エスケープされて、 <p> hoge </p>
といったように、
表示されますが、dangerouslySetInnerHTML
を使うことで、
生の HTML で描画することが可能です。
ただ、 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> ); } }
ではでは