props 的傳入方法

在 class component 中的話要先呼叫建構子（constructor）並執行 super()
將 props 作為引數(argument) 傳入來初始化 this.props

另外要特別注意的是，呼叫完 super constructor 後才能 access this
如果你對為何要這麼做很有興趣的話可以參考這裡
為什麼我們要寫 super(props)

父元件中會像這樣傳遞 props <ComponentName propsName=propsValue />

父元件 parent component（App.js）

import './App.css';
import CardWrap from './CardWrap.js';

function App() {
  return (
    <div className="App">
      <CardWrap name="weekend card"/>
    </div>
  );
}

export default App;

子元件 class component-child component（CardWrap.js）

class CardWrap extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return(<p>{this.props.card_name}</p>);
  }
}
export default CardWrap;

而在 functional component 內的話，props 就像一般函式傳入參數(parameter)來操作
functional component-child component（CardWrap.js）

function CardWrap (props){
    return(<p>{props.card_name}</p>);
}

export default CardWrap;

等一下，那之間的 props 呢？

補充一下，在 html 中常常會有 <p>一些文字</p> 兩個標籤包內容的情況
在 react 中，則是使用 props.children 來代表 component 標籤中包夾的內容

解構 props

根據之前複習過解構的規則
const {p , q} = o; ，把 o 物件中的 p 及 q 解出並指定該值到 local variable p 跟 q 上
基本上跟 const p = o.p; const q = o.q; 的作用相同（es5與之前的版本）

這裡用 functional component 作為例子

function CardWrap (props){
    const {card_name , card_desc} = props;
    return(
    <>
        <p>{card_name}</p>
        <p>{card_desc}</p>
    </>);
}

export default CardWrap;

當然也可以直接在參數（parameter）階段就解構出來，像這樣

function CardWrap({card_name , card_desc}){
    return(
    <>
        <p>{card_name}</p>
        <p>{card_desc}</p>
    </>);
}

設定 props 的預設值

可以使用ComponentName.defaultProps = { propName1: propVal1 , propName2: propVal2 ,...}
來為 component 設定 props 的預設值

基於 props 如果是從父元件傳入的話並不能被修改，所以在 defaultProps 內寫與父元件相同的 props 會完全被忽略掉

一樣用 functional component 作例子
parent component（App.js）

import './App.css';
import CardWrap from './CardWrap.js';

function App() {
  return (
    <div className="App">
      <CardWrap name="weekend card"/>
    </div>
  );
}

export default App;

CardWrap.defaultProps = {
  // 這裡的 name 會完全被忽略掉
  name: 'can i chage props from parent?',
  number:7
}

export default function CardWrap(props){
  const {name , desc  , number}= props;
  return(
  <>
  <h1>{name}<br></br>{desc}</h1>
  <p>{number}</p>
  </>)
}

落落長一堆文字，感覺有點難懂的話
這裡提供一下 codeSandbox 作為參考

接下來說明怎麼去料理(?) react state 以及重頭戲 react hook XD

參考資料

https://www.fooish.com/reactjs/components-and-props.html
https://zh-hant.reactjs.org/docs/components-and-props.html