はじめてのReact #5「Propsを使おう」

  • このエントリーをはてなブックマークに追加
  • LINEで送る

Componentに引数を渡せるProps

これまでのサンプルでは以下のように単にタグを書くことでComponentを実行していました。これだけでも十分なパワーを持っているのですが、より汎用的なComponentにすべきPropsと呼ばれる機能を使うと、Component内部に引数を渡すことができます。

ReactDOM.render(
  <Justnow />,
  document.getElementById('root')
);

指定日までの日数を表示するComponent

今回は指定した日付まで、残り何日か表示してくれるComponentを作成してみます。Props部分に集中したかったのでカウントダウン的な処理は端折りましたw

サンプル

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>RemainTime</title>
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

  <!-- Don't use this in production: -->
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>

  <script type="text/babel">
    class RemainTime extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          now: new Date().getTime(),
          target: new Date(props.date).getTime()
        };
      }

      render() {
        let remain = Math.floor( ( this.state.target - this.state.now ) / (1000 * 60 * 60 * 24) );
        return <h1>{this.props.message}まで約{remain}日</h1>;
      }
    }

    ReactDOM.render(
      <RemainTime date="2112-09-03 00:00:00" message="ドラえもん誕生"/>,
      document.getElementById('root')
    );
  </script>
</body>
</html>
- Sponsored Link -

実行結果

ドラえもんの誕生日までの日付が表示されれば成功です。
試しに <RemainTime date="2112-09-03 00:00:00" message="ドラえもん誕生"/> このあたりの日付や文言を変更して、表示が変わることも確認できると思います。

どうでも良いのですが、いつの間にかドラえもんの設定変わっていたんですねw

新設定はこんな感じ。昔は工場で作られた純粋な不良品的な扱いだったのに、色々伏線がはられましたねw

2112年9月3日(乙女座)、トーキョーマツシバロボット工場で製造されたネコ型ロボット第1号。当日の量産ラインにおいて、1台目(第0号)の次である2台目として生まれた[10]。だが、時を同じくして時間犯罪者のドルマンスタインがタイムパトロールからの逃亡のためワープを行い、これによって引き起こされた稲妻が落雷として組み立て中のドラえもんに直撃する。この衝撃で本体からネジが1本欠落した上に生産ライン上から転落し、他のネコ型ロボットより少々不器用になる後遺症を持ったため[11]、ロボット養成学校では特別クラスへ編入。ここで後の「ザ・ドラえもんズ」となる友人らと出会う。

解説

Propsの指定方法

要はHTMLやXMLでいうとことろの属性的な書き方をしてあげればOKです。属性の数は一つだけではなくサンプルのように複数同時に指定することができます。

ReactDOM.render(
  <RemainTime date="2112-09-03 00:00:00" message="ドラえもん誕生"/>,
  document.getElementById('root')
);

Propsの受け取り方

コンストラクターの場合、引数として受け取ることができます。連想配列(ハッシュ)としてやってくるのですが属性名がそのまま連想配列のキーとなっています。

class RemainTime extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      now: new Date().getTime(),
      target: new Date(props.date).getTime()
    };
  }

コンストラクター以外では、this.propsを参照することで取得できます。

  render() {
    let remain = Math.floor( ( this.state.target - this.state.now ) / (1000 * 60 * 60 * 24) );
    return <h1>{this.props.message}まで約{remain}日</h1>;
  }

Propsで渡せるデータ型

様々なデータを渡すことができます。基本的にダブルコーテーション(“)で囲った場合はすべて文字列型になりますが、それ以外のデータ型で渡したい場合はJSXで特別な意味を持つ中括弧を利用します。

  // 文字列
  <RemainTime date="2112-09-03 00:00:00" />

  // 数値
  <RemainTime time={4502271600000} />

  // 真偽値(Boolean)
  <RemainTime isDate={true} />

  // 配列
  <RemainTime date={["2112-09-03", "2114-12-02"]} />

  // 連想配列(ハッシュ)
  <RemainTime date={{"doraemon":"2112-09-03", "dorami":"2114-12-02"}} />

  // 関数
  <RemainTime callback={ (day)=>{alert(day)} } />

ここではすべて値を直接指定していますが、中括弧を利用すれば変数などを渡すことももちろん可能です。

書籍

React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで (NEXT ONE)
穴井 宏幸 石井 直矢 柴田 和祈 三宮 肇
翔泳社
売り上げランキング: 139,067

参考ページ

- Sponsored Link -

同じカテゴリの記事

Donate

投げ銭お待ちしております!

BTC3A9nH1j7qQdKrSTrmnEdweo6zPqpHBmkxC
ETH0x1aE0541198D1F9f2908a25C35032A473e74D3731
XPXaQ9zv65F9ovfoMBrFGiPRG47aSHFhy8SX
MONAMTKgzSiS5BDueZkRCHySih24TGFwHThaDQ (MonaCoin)
ZNYZhnpf4RFYVQTAQiyoJg9dGoeC4bgT3BoSy (BitZeny)

コメント

    ご質問やリクエストなどお気軽に。メールアドレスの入力は任意です。書き込みが反映されるまで時間がかかります。

    このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください