大綱

• 屬性是什麼
• Props

在學習 React 的過程中，與 Vue 其中一點不同的是，React 的資料流是單向的 - 從父層到子層。這使得 React 的元件變得簡單許多且是可預期的。元件從父層取得屬性並進行渲染。如果屬性在最頂層的元件裡做出任何修改，哪 React 會將這個變更向下擴散至整個元件樹，並重新渲染所有使用到這個屬性的元件。

屬性是什麼

屬性，props，是『properties』的縮寫，意思是指被傳遞至元件中，可以保存任何我們想要的格式。以下將介紹，基本的語法，請參照如下。

當與 JSX 一起使用時，可以將屬性設定為字串：
<a href='/surveys/add'>Add survey</a>

也可以使用 {} 來設定，這會放入 JavaScript 程式碼並允許我們傳送任何類型的變數。
<a href={'/surveys/' + survey.id}>{survey.title}</a>

哪我們也可以把 JSX 的展開語法 (spread syntax) 用於物件屬性：

var ListSurveys = React.createClass ({
  render: function() {
    var props = {
      one: 'foo',
      two: 'bar'
    };
    return <SurveyTable {...props}/>;
  }
});

另外，屬性對事件處理器也是很有用的，請看以下範例：

var SaveButton = React.createClass({
  render: function() {
    return (
      <a className='button save' onClick={this.handClick}>Save</a>
    );
  },
  handClick: function() {
    …...
  }
})

這裡我們傳送了一個 onClick 屬性給錨點標記 (anchor tag)，其值則為 handClick 函式。每當我們要點擊這個錨點時，handClick 方法就會執行。

PropTrpes

以下是 React 透過元件內定義的設定物件 (config object) 來驗證我們的屬性：

var SurveyTableRow = React.createClass({
  propTypes: {
    survey: React.PropTypes.shape({
      id: React.PropTypes.number.isRequired
    }).isRequired,
    onClick: React.PropTypes.func
  },
  // ...
});

當我們把元件實作化的時候，如果未符合 propTypes 的要求，那麼便會記錄一條 console.warn。

另外，要特別說明的是，對於可以選擇的屬性只要不去設定 .isRequired 我們就可以實作化。然而，在應用程式中使用 propTypes 又並非是絕對不要的，但是它們提供了一個很好的方式來讓我們說明這個元件的 API。