Reactで<br/>を使わないで\nで改行したい

前提

react: 17.0.2
react-dom: 17.0.2

背景

reactで改行をしたい時に調べると、\nを<br/> に置き換えて解決する方法が多くありましたが、できるだけ<br/>を使いたくなかったので、調査した結果をまとめます。

ケース1:component内のstringを素直に改行して表示したい場合

cssでwhite-space: pre-wrap; を指定してあげて、
<h1 className="text">Hello\nCodeSandbox</h1>ではなく、

<h1 className="text">{`Hello\nCodeSandbox`}</h1>

のように、{``}で囲んであげる必要があります。

App.js

import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1 className="text">{`Hello\nCodeSandbox`}</h1>
    </div>
  );
}

styles.css

.text {
  white-space: pre-wrap;
}

Hello\nCodeSandboxは変数にしてあげても問題ないので、以下のように書くこともできます。

App2.js

import "./styles.css";

export default function App() {
  const text = `Hello\nCodeSandbox`
  return (
    <div className="App">
      <h1 className="text">{text}</h1>
    </div>
  );
}

ケース2: propsで別のComponentに渡したい時

propsで別のComponentに渡して改行させたい時に、ケース1の方法だと解決できない場合があります。その場合は、propsではなくchildrenで渡してあげると解決します。

App.js

import "./styles.css";

export default function App() {
  const text = `Hello\nCodeSandbox`
  return (
    <SomeCompoent>{text}</SomeCompoent>
  );
}

const SomeCompoent = ({children}) => {
  return (
    <div>
      <h1 className="text">{children}</h1>
    </div>
  );
}

styles.css

.text {
  white-space: pre-wrap;
}