props

1、props:在components(以下稱元件)之間傳遞的資訊

每個元件都有props，它是一個物件，用來存放和元件相關的資訊

傳遞資訊給元件的方式:

文字形態的資訊

<MyComponent anyNameYouLike="你好!" />

非文字形態的資訊都要用'{}'括起來，包含數字也是

<MyComponent info1="你好" info2={['a','b','c']} info3={2} info4={true} />

傳遞進去的資訊會存放在該元件的props物件中

亦可傳遞函數，通常傳遞做為event handler的函數

在react中，函數會定義在元件class的說明物件中

只能在render方法裡面的return內容中傳遞props給其它component instance

對於定義函數與傳遞函數給其他元件的那個元件本身，對於事件監聽函數以及傳遞的prop的名稱是有一個命名慣例存在的，不一定要遵守，但瞭解規則是有好處的

handler的名稱通常是handle+事件名稱，例如handleClick

prop的名稱通常是on+事件名稱，例如onClick

這有點容易搞混，因為jsx元素有兩個類別，一是html-like，一是component instance

在html-like元素中屬性名稱on+事件名稱(首字大寫，如onClick)是用來綁定事件監聽器

但在component instance中屬性名稱on+事件名稱只是一個通常用來傳遞事件監聽器的props屬性名稱

換句話說on+事件名稱(首字大寫)在component instance類別的jsx元素中並沒有特殊功能，並不會有綁定監聽器的動作，它就只是一個隨意的名稱

區分jsx兩種元素類別的方式很簡單，只要記住component instance標籤字首是大寫

component instance通常表示成self-closing標籤，但也可以寫成一般有開頭和結尾的形式，同樣有效，例如<MyComponent></MyComponet>，寫成開頭與結尾的方式有個好處，每個元件的props都有一個children屬性，this.props.children代表在component instance的開頭與結尾標籤中所有元素

<MyCom>
   this is a text.
</MyCom>
this.props.children等於"this is a text."

<MyCom>
<MyCom2 />
</MyCom>
this.props.children等於<MyCom2 />這個元件

要注意當開頭與結尾之間有超過一個以上的元素，則children是array
但當之間只有一個元素的時候，children就是該元素，而不會用array包裝 

被包含在component instance的開頭和結束標籤中的元素不會被render

設定props預設值的方法:

在說明書文件中定義"getDefaultProps"方法，return一個物件，該物件內容會加到props裡面，當有從外部傳遞props屬性時，會以外部傳入的值取代預設值，否則套用預設值

var Button = React.createClass({
  getDefaultProps:function(){
    return {text:'I am a button'};
  },
  render: function () {
    return (
      <button>
        {this.props.text}
      </button>
    );
  }
});

ReactDOM.render(
  <Button />,
  document.getElementById('app')
);

未傳入text prop，所以使用預設值"I am a button"

2、propTypes，props驗證與文件化

用法如下(參考codecademy):
在元件定義物件中新增一個propTypes屬性，值為物件，當一個元件預期接收props，則在此物件中加入對應prop名稱的key，值則需符合"React.PropTypes.指定的形態" 這種格式，其代表接收的指定prop需符合該形態，否則在console會有警告訊息

加上.isRequired表示是必要傳入值，若未傳入，則一樣會在console有警告訊息

一般會將propTypes定義在最上方，可以幫助檢閱這個元件的用途並加上說明

var Runner = React.createClass({
  propTypes: {
    message:   React.PropTypes.string.isRequired,
    style:     React.PropTypes.object.isRequired,
    isMetric:  React.PropTypes.bool.isRequired,
    miles:     React.PropTypes.number.isRequired,
    milesToKM: React.PropTypes.func.isRequired,
    races:     React.PropTypes.array.isRequired
//只有bool和func是簡寫表示，其餘形態都是完整寫法
  },

  render: function () {
  var miles = this.props.miles;
    var km = this.props.milesToKM(miles);
    var races = this.props.races.map(function(race, i){
      return <li key={race + i}>{race}</li>;
    });

    return (
      <div style={this.props.style}>
        <h1>{this.props.message}</h1>
        { this.props.isMetric && 
          <h2>One Time I Ran {km} Kilometers!</h2> }
        { !this.props.isMetric && 
          <h2>One Time I Ran {miles} Miles!</h2> }
        <h3>Races I've Run</h3>
        <ul id="races">{races}</ul>
      </div>
    );
  }

});