Reactで改行コード入りの文字列を改行して表示する

概要

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

前提

以下環境で動作確認

要素 バージョン
debian 8.6
node 8.2.1
react 15.0.0

問題点

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>
}

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です