接下來跟大家介紹的是這一篇默司大大 在線上Reactjs讀書會分享攻略jason大的github的level5跟level6章節

https://www.youtube.com/watch?v=ibpa4p7YOug (約56分鐘)

重點心得整理

1.子元件如何接受參數與顯示

    render() {
      const { title, completed } = this.props;  //Es6的寫法
      return (
        <div>
          <input type="checkbox" checked={completed} />  <---{completed} 是接收後顯示的方式
          <span>{title}</span>  <---{title} 是接收後顯示的方式
          <button>x</button>
        </div>
      );
    }

2.上層傳遞參數到下層的子元件

const {
  InputField,
  TodoHeader,
  TodoList
} = window.App;

class TodoApp extends React.Component {
  render() {   
    return (
      <div>
        <TodoHeader
          title="我的待辦清單"
          username="polo"   
          todoCount={99}
        />
        <InputField placeholder="新增待辦清單" />
        <TodoList />
      </div>
    );
  }
}

window.App.TodoApp = TodoApp;

加入es6 的 spread

const {
  InputField,
  TodoHeader,
  TodoList
} = window.App;

class TodoApp extends React.Component {
  render() {   
   let headerProps={title:"我的待辦清單",
                 username:"polo"   
                 todoCount:99};
    return (
      <div>
        <TodoHeader {...headerProps} />   <---這邊是Es6的新語法 
        <InputField placeholder="新增待辦清單" />
        <TodoList />
      </div>
    );
  }
}

window.App.TodoApp = TodoApp;

這邊關於spread 默司大也有DEMO更多的用法例如
let {title,username,...other}=headerProps;
這樣other就是剩餘的參數了,這個行為也叫做[Es6]Object rest properties
另外一種用法則是組合叫做 [ES6] Object spread properties

const firstName = 'polo';
const lastName = 'chi';
const others = {
  sex: 'male',
  age: 41
};
const user = { firstName, lastName, ...others }; <---這樣組合起來

關於更多Es6 spread (解構賦值) 用法 更多可以參考阮一峰老師的文章與jason大大的todolist github
很清楚教學
http://es6.ruanyifeng.com/#docs/destructuring
https://github.com/shiningjason1989/react-quick-tutorial/tree/master/level-06_transferring-props

3.Reactjs防呆,避免發生錯誤時整個系統都當掉,會有個warning callback
寫法很簡單以影片中為例,在傳遞進來的地方把物件打上propTypes並給於每個參數不同的型別即可

    TodoHeader.propTypes = {
      title: React.PropTypes.string,
      username: React.PropTypes.string,
      todoCount: React.PropTypes.number
    };

4.防呆之外再給預設值,是不是非常簡單呢

TodoHeader.defaultProps = {
  title: '我的待辦清單',
  username: 'Guest',
  todoCount: 0
};