一番簡単なChildren要素を改行する方法【React】

背景

Reactで子コンポーネントにchildren要素を渡したときに、途中で改行したくなりました。
調べると少しややこしい方法で実装している記事が多く、試したら簡単にできたので残しておきます。
※調べて出てこなかったのは、それくらいの内容は残すまでもないんじゃねという意味かもしれません。

方法

とても簡単です。

• childrenに{'\n'}を入れる。
• CSSでwhite-space: pre-line;と指定する。

これで簡単にChildren要素を改行をすることができます。

実装例

これだけではツイートしているくらいのボリュームですし、折角なので実際の使用例を見てみましょう。
今回はお問い合わせフォームの送信完了後のメッセージを表示するというシチュエーションで想定してみます。

まずは受け取る側の子コンポーネントを用意します。

thankyouMessage.tsx

import { memo, ReactNode, VFC } from 'react';
import style from './thankyouMessage.module.scss';

type Props = {
  isSending: boolean;
  isComplete: boolean;
  children: ReactNode;
};

export const ThankyouMessage: VFC<Props> = memo((props) => {
  const { isSending, isComplete, children } = props;
  return <>{isComplete && !isSending && <div className={style.thankyou}>{children}</div>}</>;
});

コードの説明は....不要ですよね。
フォーム送信後のサンキューメッセージのコンポーネントです。よくある緑のやつですね。

続いてCSSファイルです。私はCSSModulesでScssを使っているので以下のような記述になります。
※一部書き方が独特です。ご了承ください。

ThankyouMessage.module.scss

@import '../../static/scss/bases/settings';
@import '../../static/scss/bases/mixins';
.thankyou {
  font-weight: bold;
  background-color: rgb(103, 189, 103);
  color: white;
  font-size: $subTitleSize;
  white-space: pre-line;
  padding: 5%;
  margin-top: 2rem;
  @include sp() {
    font-size: $miniTextSize;
  }
}

先ほど作成した「ThankyouMessage」コンポーネントを、親コンポーネントで利用します。雰囲気を掴むために送信処理を一部記載してますが、注目すべきはもちろん後半のThankyouMessageコンポーネントです。

contact.tsx

import { memo, useState } from 'react';
import axios from 'axios';
import { FlatButton } from '../components/parts/buttonFlat';
import { ScreenLockModal } from '../components/parts/screenLockModal';
import { ThankyouMessage } from '../components/parts/thankyouMessage';

export const Contact = memo(() => {
  const [isSending, setSending] = useState(false);
  const [isComplete, setComplete] = useState(false);
  const submit = () => {
    setSending(true);
    axios
      .post('送信処理をかく')
      .then((res) => {
        console.log(res);
        setComplete(true);
      })
      .catch((error) => {
        console.log(error);
      })
      .finally(() => setSending(false));
  };
  return (
　　　<div className={style.wrapper}>
　　　　{!isComplete && <FlatButton onClick={submit}>送信</FlatButton>}
　　　　<ScreenLockModal isSending={isSending}>送信中...しばらくお待ちください</ScreenLockModal>
　　　　<ThankyouMessage isSending={isSending} isComplete={isComplete}>
　　　　　　フォームの送信が完了しました。 {'\n'}
　　　　　　1営業日以内に担当よりご連絡いたします。{'\n'}
　　　　</ThankyouMessage>
　　  </div>
　　);
});

これで簡単に改行できるようになりました。