React Props

Props是Properties的縮寫，它是唯讀的，無論你使用 function 或是 class 來宣告 component，都不能修改自己的 props，它的資料流是單一的，是由父組件傳遞到子組件的，而props本身不能變動，但是可以透過state的函式去做改變，只要將父組件state的函式當作props傳給子組件，子組件再呼叫該函式，就可以將更新後的state變成新的props給子組件使用。

上圖是父組件，將setCount當作props傳給<Counter>，要記得因為變數是JS所以必需要使用大括弧。

上圖是子組件，將物件props傳入，使用的時候和父組件的名稱對應就好，(props.count、props.setCount())，跟前幾篇的結果一樣，只是更新資料的稍微改變而已。

PropTypes

這是React內建的套件，可以對資料做型別檢查避免錯誤，以下參考官方範例

import PropTypes from 'prop-types';

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string
};

在此組件的下方Greeting.propTypes(P要小寫)是使用key-value-pair去定義props型別，key(名稱):value(型別)，在定義型別時記得要加上PropTypes(P要大寫)

參考資料：

Child Component && Props、React 官網