1. /
  2. /
  3. はじめてのReact #5「Propsを使おう」
     
  •   

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

  • このエントリーをはてなブックマークに追加
  • LINEで送る
この記事は 2018年12月25日 に書かれたものです
「はじめてのReact」一覧に戻る

Componentに引数を渡せるProps

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

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

指定日までの日数を表示する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>
- Sponsored Link -

実行結果

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

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

ドラえもん (キャラクター) - Wikipedia
https://ja.wikipedia.org/wiki/ドラえもん_(キャラクター)
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)} } />

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

「はじめてのReact」一覧に戻る

書籍

React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで (NEXT ONE)
React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで (NEXT ONE)

posted with amazlet at 18.12.24
穴井 宏幸 石井 直矢 柴田 和祈 三宮 肇
翔泳社
売り上げランキング: 139,067
Amazon.co.jpで詳細を見る

参考ページ

Components and Props – React
https://reactjs.org/docs/components-and-props.html
A JavaScript library for building user interfaces
reactjs.org

コメント

コメント欄は休止中です。お問い合わせはこちらからどうぞ。ご質問はTwitterにリプを投げてください。

このブログを応援する

お寄せいただいたお気持ちは全額サーバ代や次の記事を執筆するための原資として活用させていただいております。この記事が参考になった場合などぜひご検討ください。

PayPal（ペイパル）
PayPalで300円支払う
※金額は任意で変更できます。
※100円でも泣いて喜びますw
※住所の入力欄が現れた場合は「no needed」を選択ください
これまでのご協力者さま
- Sponsored Link -

関連した記事

同じカテゴリの記事

旧コメント欄（表示のみ）

※こちらのコメント欄は以前稼働していたものです。現在は新たに書き込むことはできません。ご感想やご質問は記事の下にあるコメント欄をご利用ください。