概要

Reactにて、改行を含んだ文字列を改行を反映させて出力するためのコンポーネントを実装したお話。

前提

以下環境で動作確認

問題点

Reactにおいて、以下のように改行コードを含んだ文字列がある場合に、改行コードを改行タグに変換してレンダリングしても、タグがエスケープされて表示されてしまう。

render() {
  const content = "古池や¥n蛙飛び込む¥n水の音";
  return <span>{content.replace(/¥n/g, "<br/>")}</span>
}

一応、dangerouslySetInnerHTMLを用いることで、BRタグを改行と認識させることができるが、これは名前の通りセキュリティリスクのある機能なので極力使わずに解決したい。

解決策

そこで今回は、改行コードを含んだ文字列を、改行込みで表示するためのコンポーネント、MultiLineTextを実装した。

import React from 'react';
export default class MultiLineText extends React.Component {
  render() {
    const renderTexts = () => {
      if (typeof(this.props.children) === "string") {
        return this.props.children.split("\n").map((m,i) => <span key={i}>{m}<br/></span>)
      } else {
        return "";
      }
    }
    return (
      <div className={this.props.className}>
        {renderTexts()}
      </div>
    );
  }
}

MultiLineTextコンポーネントを以下のように利用することで

render() {
  const content = "古池や¥n蛙飛び込む¥n水の音";
  return <MultiLineText>{content}</MultiLineText>
}

以下のように改行を反映させて表示させることができる