ジャンボモナカ

34歳のハゲデブがHTML5ハイブリッドアプリ開発プラットフォームmonacaを始めました。

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;
}