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

Componentに引数を渡せるProps

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

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

Componentに引数を渡せるProps
指定日までの日数を表示するComponent
- サンプル
- 実行結果
解説
書籍
参考ページ

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

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

サンプル

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

実行結果

ドラえもんの誕生日までの日付が表示されれば成功です。試しにこのあたりの日付や文言を変更して、表示が変わることも確認できると思います。

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

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

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