Reactのrenderで改行を反映させたい
renderメソッドで表示させる際に、htmlタグがエスケープされた状態で表示されてしまう。
class Hoge extends React.Component { constructor(props) { this.state = { hoge: '<div>ssssss</div>' } } render(){ <div>{this.state.hoge}</div> } }
通常であれば問題はないのだが改行されたデータをbrタグに変更して表示させたい場合、どうすればいいのだろうか?
独自処理でエスケープを行い改行データを最後にbrタグに変更することはできるが、これだとセキュリティー的によろしくない。 (ちなみにhtmlをそのまま描画するには、前回書いたdangerouslySetInnerHTMLプロパティーを使う方法がある。)
そこでCSSでwhite-spaceを設定することで改行をbrタグに変換することなく改行として表示させることができる。
div { white-space: pre-line; }
div { white-space: pre-wrap; }