Reactjsで改行コードをbrに変換する

方法1: reactjsのdangerouslySetInnerHTMLを使う方法

参考: https://facebook.github.io/react/docs/jsx-gotchas.html

# sample.js.jsx.coffee:

# 改行コードをBRタグに変換
nl2br: (str) ->
  str.replace(/[\n\r]/g, "<br />")

render: ->
  ...
  <dd dangerouslySetInnerHTML={{__html: nl2br(this.state.report.description)}}></dd>
  ...

方法2: 改行をsplitしてjsxの配列を作成する方法

# sample.js.jsx.coffee:

# 改行コードをBRタグに変換したJSXを返す
nl2brJsx: (str) ->
  lines = []
  for line in str.split("\n")
    lines.push(`<div>{line}<br/></div>`)
  lines

render: ->
  ...
  <dd>{Utils.nl2brJsx(this.state.report.description)}</dd>
  ...