Reactjsで改行コードをbrに変換する
3568 ワード
方法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>
...
# 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>
...
Author And Source
この問題について(Reactjsで改行コードをbrに変換する), 我々は、より多くの情報をここで見つけました https://qiita.com/k-yamada-github/items/bb5f50af5a986c28db72著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .