ReactでPHPのnl2brのような事をしたい時。たとえばAPIなどで以下のtextのような改行コード混じりの値があったとします。これをこのまま表示させてもHTMLでは改行せず読みづらくなってしまいます。

※こちらは気象庁の公式APIで東京都の天気予報のJSONです。

{
 "publishingOffice": "気象庁",
 "reportDatetime": （中略）,
 "targetArea": "東京都",
 "headlineText": "",
 "text": "　日本付近は冬型の気圧配置となっています。\n\n　東京地方は、晴れています。\n\n（中略）"
}

単純に\nの改行コードをreplaceで置換して<br />にしてもそのまま文字列としてエスケープされてしまい改行しませんでした。ではどうするか…

フラグメントを使う

そこでフラグメントを使います。Fragment、或いは<>〜</>で包括した部分を単体でまとめることが出来ます。

import React, { Component } from 'react';
import { render } from 'react-dom';
class Weather extends Component {
 constructor(props) {
  super(props);
  this.state = {
   isLoaded: false,
   data: []
  };
 }
 componentDidMount() {
  fetch('https://www.jma.go.jp/bosai/forecast/data/overview_forecast/130000.json')
   .then(res => res.json())
   .then(json => {
    this.setState({
     isLoaded: true,
     data: json
    });
   });
 }
 render() {
  var { data, isLoaded } = this.state;
  if (!isLoaded) {
   return <p>お待ち下さい</p>;
  } else {
   return (
    <section>
    <h1>{data.targetArea}の天気</h1>
    <p>{ data.text.split( /\n/ ).map( ( item ) => {
      return (
       <React.Fragment>{ item }<br /></React.Fragment>
      );
     } )
    }</p>
    </section>
   );
  }
 }
}
render(<Weather />, document.getElementById('app'));

こちらではtextの値に対して改行コードの数だけループを回し、<br />で分割しています。

ただフラグメントをあまり多用すると、コードの可読性が悪くなるうえにパフォーマンスにも影響が出てくるので、ここぞと言うときだけにとどめた方が良いと思います。

おしまい♥

タグ：React