React Native公式サイトのpropsを使うサンプルにハマる

ここ２、３日、React Nativeのサンプルを打って動作を確かめている。 なるほど、これは面白いですわ。生産性が高いし流行るはずですわ。

昨日、ちょっとハマったのが以下のコード。

自作のComponentにタグのプロパティを渡す方法についてのサンプルで、Class Componentで書く方法のコードなんだけど、

class Cat extends Component {
  state = { isHungry: true };

  render(props) {
    return (
      <View>
        <Text>
          I am {this.props.name}, and I am
          {this.state.isHungry ? " hungry" : " full"}!
        </Text>

   ...

これ、公式サイトのサンプルをそのまま打ってはいなくて、 適当に書いたテストコードにポイントになる部分を追加するやり方でやってたので、 実際は以下のようなコードになってた。

class Cat extends Component {
  state = { isHungry: true };

  render(props) {
    return (
      <View>
        <Text>
          I am {props.name}, and I am
          {this.state.isHungry ? " hungry" : " full"}!
        </Text>

   ...

何が違うかというと、props.nameというところが、正しくはthis.props.nameじゃないといかんかった。

ちょっと待って、propsってrender()関数の引数やんか。 引数にthisをつけるのおかしいだろ。

と思ったら、引数としてある方がおかしいのでした。 （実際はjavascriptのobjectのpropertyとして定義してある方が、仕組みとしては納得できる）

実際render()関数の引数を外して、

  render() {
    return (
      <View>

にしても動くしね。

ので、公式サンプルの凡ミスでちょっとした時間ハマった。 （かわりにReact Nativeの実装が少し見えた）

なんか気軽にDocumentをEditしてPull Requestできるらしいが、GitHub素人でPRの仕方がわからんので、また後にしよう（笑。