【React Native】Propsとは？ - マリーとジョーのIT研究ブログ（ロックシステム）

import React, { Component } from 'react';

export default class testAAA extends Component {
  render() {
    return (
      //カスタムComponent「C」を使用、代入しているProps「a="y" b="z"」
      <C a="y" b="z"></C>
    );
  }
}

//カスタムComponent「C」を定義
class C extends Component {
    render() {
        console.log(this.props);
        return null;
    }
}

//console.logの値：　{a: "y", b: "z"}

Hello, 〇〇〇!が表示できるComponentクラスを作る

参考コード

下記のコードのようにHelloのクラスを3回使ってnameが毎回違うようにできます。

名前を可変にできるComponentクラスを作成

人の名前は色々あるので、名前を可変にできるComponentクラスを作ります。人の名前はカスタマイズしたい値なのでPropsの値を使います。Props名はnameにしています。

class Hello extends Component {
  render() {
    return (
      //this.propsからPropsの値が使える
      <Text>Hello, {this.props.name}!</Text>
    );
  }
}

Propsを代入する

Propsが使うクラスを作ったので、nameのPropsを代入しましょう。HelloのComponentクラスでthis.props.nameを使っているのでその値を代入する下記のコードを記述します。

<Hello name="Bob"></Hello>

補足：StyleSheetを使用しない記述方法

React Nativeの例コードを見たらStyleSheetが使われていることが多いですが、StyleSheetを使用しなくても実装できます。

さて、どちらの方がいいでしょうか。

StyleSheetを使用した場合

StyleSheetを使用しない場合

上記２つの結果を見ると、表示される画像の大きさは同じでした。

StyleSheet.createの値を確認したところ、下記のようなオブジェクトで、98と99はスタイルのIDになっていました。

//StyleSheet.createの値
{
    pic1: 98
    pic2: 99
}

２つの方法を調べてみましたが、今はStyleSheetを使っても使わなくても結果は同じです。（2020.01 現在）しかし、将来的にStyleSheetは処理スピードが速くなると予想されているので、StyleSheetを使うことをお勧めします。

結論

PropsはComponentをカスタマイズするための機能です。Componentはいつも同じでしたらあまり便利ではないので、必要に応じてPropsの値を代入してカスタマイズ出来ます。

次回

ComponentやPropsはカスタマイズできますが、表示している間に変更する場合はstateということが必要です。次回はstateについて説明します。