Reactで改行を含んだテキストをコンポーネントに渡す 💻

改行タグとdangerouslySetInnerHTMLを使う方法、改行コードとwhite-space: pre-wrapをよく使っていたのですが、最近Childrenで渡す方法を教えていただきました。

改行タグとdangerouslySetInnerHTMLを使う方法

ソースコード

const { createRoot } = ReactDOM;
const container = document.getElementById('app');
const root = createRoot(container);

function Parent() {
  const text = '1行目<br />2行目';

  return (
    <div>
      <Child text={ text } />
    </div>
  );
}

function Child({ text }) {
  return (
    <p dangerouslySetInnerHTML={{ __html: text }} />
  );
}

root.render(<Parent />);

DEMO

改行コードとwhite-space: pre-wrapを使う方法

ソースコード

const { createRoot } = ReactDOM;
const container = document.getElementById('app');
const root = createRoot(container);

function Parent() {
  const text = `1行目
2行目`;

  return (
    <div>
      <Child text={ text } />
    </div>
  );
}

function Child({ text }) {
  return (
    <p style={{ whiteSpace: 'pre-wrap' }}>{ text }</p>
  );
}

root.render(<Parent />);

DEMO

改行タグとChildrenを使う方法

ソースコード

const { Fragment } = React;
const { createRoot } = ReactDOM;
const container = document.getElementById('app');
const root = createRoot(container);

function Parent() {
  return (
    <div>
      <Child>
        <Fragment>1行目<br />2行目</Fragment>
      </Child>
    </div>
  );
}

function Child({ children }) {
  return (
    <p>{ children }</p>
  );
}

root.render(<Parent />);

DEMO