React Props Passing by (Class, Function, Arrow Function, )

why

React Class 記法の props の話がわからなくなった

Class での基本表示

import React, { Component } from 'react';

class App extends React.Component {
  render() {
    return (
      <div>hoge</div>
    );
  } 
}
export default App;

これで hoge だけ表示できる。
ここから他の Component に変数を受け渡すのに props を使用する

Class の this.props を受け取る

Tutorial: Intro to React – React

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>{this.props.item1}</li>
          <li>{this.props.item2}</li>
          <li>{this.props.item3}</li>
        </ul>
      </div>
    );
  }
}

こうして渡された name という prop から「 name のリスト」として
item1, item2, item3, を表示するリストを App のなかの return で

<ShoppingList       
  name="Mark"       
  item1="Instagram" 
  item2="WhatsApp"  
  item3="Oculus"    
/>

こうやって使用すると、読み込まれる

f:id:kei_s_lifehack:20201203160613p:plain

name の買い物リストとして, item 1 ~ 3 が render される。
同じファイル内では export は必要ないらしい

return React.createElement('div', {className: 'shopping-list'},
  React.createElement('h1', /* ... h1 children ... */),
  React.createElement('ul', /* ... ul children ... */)
);

また、こうして createElement で書くこともできるらしい。

function での書き方

reactjs.org

funciton では同じものがかなりシンプルにかける。

export default function App() {
  return (
    <div>
      { ShoppingList('Hoge', 'Apple', 'banana',) }
    </div>
  )
}

App では return を書いて引数を渡すだけだし

function ShoppingList(name,item1,item2) {
    return (
      <div classname="shopping-list">
        <h1>shopping list for {name}</h1>
        <ul>
          <li>{item1}</li>
          <li>{item2}</li>
        </ul>
      </div>
    );
  }

ShoppingLIst も引数をちゃんと受け取って return で html に入れて返しているだけになっている。
this も props も使わない。

Arrow Fuction での書き方

moox.io

もっと簡略化した形もある

function Name() {}
// vs
const Name = () => {};

このやり方を使うとさっきの ShoppingList は

const App = () => {
  return (
    <div>
      { ShoppingList('Hoge', 'Apple', 'banana',) }
    </div>
  )
} 
export default App;

App では const に入れて、同じように ShoppingList に引数を渡す。
ここでは export default App を分離する必要がある

const ShoppingList = (name,item1,item2) => {
    return (
      <div classname="shopping-list">
        <h1>shopping list for {name}</h1>
        <ul>
          <li>{item1}</li>
          <li>{item2}</li>
        </ul>
      </div>
    );
  }

ShoppingList も const に入れて、引数を取る Arrow Function として使える。

const FunctionName = (args) => {
  return ()
}

これが基本形になる。
function 書かないで const と = () => 書くのであまり手間は変わらないが、短いと楽になる
短い例だと

const greed = name => <h1>Hello {name}</h1>

これでいける。 return もいらない！
Layout などの単に Children に className を当てるだけのものでは便利そう。

class と組み合わせるときの問題

const Button = ( { theme } ) => 
  <h1>This is {theme} button</h1>

class 記法で呼び出す場合、この謎の ( { } ) を取ると読み込めない。
ブラケットの意味、object でもないし、ググってもわからなかった。
とりあえず class の時は {} で引数を取ると覚える。

state

class Square extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null,
    };
  }

  render() {
    return (
      <button className="square" onClick={() => alert('click')}>
        {this.props.value}
      </button>
    );
  }
}