React プライバシーポリシー画面お手軽作成

TECH::CAMP Advent Calendar 2017　17日目です。

はじめに

Reactで画面作成をしていて、長い文章などを画面に表示する事があるかと思います。例えば利用規約やプライバシーポリシーなど、どういう風にに書いて行こうかなと思った時に実践した方法を紹介したいと思います。

実装

実際にどのようにするかというと以下のようにしてみました。

components/config/aseets.js

function assets() {
  return Object.assign(
    {},
    {
      policy: {
        privacy: [
          {
            title: '第1条（プライバシー情報）',
            body:
              'プライバシー情報のうち「個人情報」とは，
               個人情報保護法にいう「個人情報」を指すものとし，生存する個人に関する情報であって，当該情報
               に含まれる氏名，生年月日，
               住所，電話番号，連絡先その他の記述等により特定の個人を識別できる情報を指します。プライバ
               シー情報のうち「履歴情報および特性情報」とはxxxxxxxxxxx',
            key: 'privacyContents1',
          },
        ]
      }
    }
  );
}
export default assets();

configの中のassets.jsファイルの中で関数を作って、APIのような形で呼び出せるようにしました。

関数を呼び出した先の記述は下記のようにしました。

class PrivacyComponent extends React.Component {

  mapPolicyRender() {
    return assets.policy.privacy.map(item => (
      <div key={item.key}>
        <div 
         className='item_title'
         {item.title}
        </div>
        <div>
         {item.body}
        </div>
      </div>
    ));
  }


  render() {
    return (
      <Grid 
        className='grid_policy_privacy'
      >
        <div
          className='privacy-container'
        >
          <div
            className='privacy'
          >
            <div>
              {this.mapPolicyRender()}
            </div>
          </div>
        </div>
      </Grid>
    );
  }
}


export default Privacy();

関数を呼び出して、mapで回せば一つ一つ表示できます。こうすることで、要素一つ一つにクラスをつけて、cssを書く必要もありませんし、非常にすっきりしたコードにする事が出来ます。

ただこれだと文字列を改行させたいとなった時に今の記述のままだと出来ないので、dangerouslySetInnerHTMLを書く必要があります。これも簡単に書くことが出来ます。

class PrivacyComponent extends React.Component {

  mapPolicyRender() {
    return assets.policy.privacy.map(item => (
      <div key={item.key}>
        <div 
         className='item_title'
         {item.title}
        </div>
        <div>
         dangerouslySetInnerHTML={this.BeginOnNewLinePrivacyText(item.body)}
        </div>
      </div>
    ));
  }

  BeginOnNewLinePrivacyText(item) {
    return {__html: item};
  }

  render() {
    return (
      <Grid 
        className='grid_policy_privacy'
      >
        <div
          className='privacy-container'
        >
          <div
            className='privacy'
          >
            <div>
              {this.mapPolicyRender()}
            </div>
          </div>
        </div>
      </Grid>
    );
  }
}

export default Privacy();

新しく記述したのはこれだけです。

<div>
 dangerouslySetInnerHTML={this.BeginOnNewLinePrivacyText(item.body)}
</div>

BeginOnNewLinePrivacyText(item) {
  return {__html: item};
}

これで</br>をassets.jsのなかで使用することが出来ます。

最後に

とりあえず、これで文字は表示することが出来ましたが、画面左上に文字が出ているで、UIは綺麗ではありません。
ここからgridシステムなどを使えば簡単に中央によせたり、レスポンシブ対応ができるのでぜひやってみて下さい。