Zenn
Open1

フロントエンド勉強メモ

Next.js
React
フロントエンド
donchan922donchan922

Reactで\nが含まれた文字列を改行して画面に表示する

方法1: CSSで対応する

export default function Home() {
  const text = 'aaa\nbbb\nccc';
  return (
    <div style={{whiteSpace: "pre-wrap"}}>{text}</div>
  )
}

方法2: dangerouslySetInnerHTMLを利用する

export default function Home() {
  const text = 'aaa\nbbb\nccc';
  return (
    // 適切なサニタイズ処理を行うこと
    <div dangerouslySetInnerHTML={{__html: sanitize(text.replace(/\n/g, '<br />'))}} />
  )
}

方法1がよさそう。方法2だとXSSの脆弱性が発生するので、サニタイズ処理を行うなど注意を払う必要がある。

参考