Reactで改行コード¥nの入っている文字列をHTMLで表示

プログラミング

2018.11.15

Reactで改行コード表示

Reactで長い文章を表示させたいとき、文章の中に改行コードが入っているものをHTML表示させる方法です。

例えば下のようなプライバシーポリシーの文言を表示したいとします。

第1条（プライバシー情報）

プライバシー情報のうち「個人情報」とは，個人情報保護法にいう「個人情報」を指すものとし，生存する個人に関する情報であって…

プライバシー情報のうち「履歴情報および特性情報」とは…

このように改行コードの含まれている文字列をそのままHTML表示すると、下のように改行が無視されてしまいます。

第1条（プライバシー情報）プライバシー情報のうち「個人情報」とは，個人情報保護法にいう「個人情報」を指すものとし，生存する個人に関する情報であって…プライバシー情報のうち「履歴情報および特性情報」とは…

これを改行コードを含んだ文字列のまま、改行して表示するには下のように書きます。

render() {
  return (
    <div>
      {
        //改行コードで分割し、ループ表示
        STRING.split('\n').map(str => {
          return(<p>{str}</p>)
        })
      }
    </div>
  )
}

文字列STRINGをsplit()を使って改行コードで分割し、map()でループして<p>タグを生成しています。

pタグなので厳密には改行ではないですが、スペースが空いた状態で表示されるようになります。

また、例では単純にpタグで囲んでいるだけですが、表示する文字列を装飾したい場合にはコードの下記の部分を変更することで色々カスタマイズできるかと思います。

return(<p>{str}</p>)