主にプログラミング関連のメモ帳 ♪(✿╹ヮ╹)ノ
書いてあるコードは自己責任でご自由にどうぞ。記事本文の無断転載は禁止です。
2016/01/07
最近、 React.js + Electron + TypeScript で、アプリを作っているのですが、
render()
の中の React Component で、生の HTML を扱うことが発生したので、
やり方を書いておきます。
通常通りに値を渡すと、エスケープされて、 <p> hoge </p>
といったように、
表示されますが、dangerouslySetInnerHTML
を使うことで、
生の HTML で描画することが可能です。
ただ、 XSS が発生する可能性が出てくるので、使用には注意が必要です。
実際に使うと、こんな感じ。
/// <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>
);
}
}
ではでは