React应用开发第十讲（接口约束）.md

React应用开发第十讲（接口约束）

为组件添加PropTypes接口约束

代码清单；app/components/Notes/Notes.jsx

import React, { Component, PropTypes } from 'react';
import NoteList from './NoteList.jsx';

export default class Notes extends Component {
  static propTypes = {
    username: PropTypes.string.isRequired,
    notes: PropTypes.array.isRequired
  }
  render(){
    console.log('notes:', this.props.notes);

    return (
      <div>
        <p> 对{this.props.username}评论： </p>
        <NoteList notes={this.props.notes} />
      </div>
    )
  }
}

代码清单；app/components/UserRepos/UserRepos.jsx

import React, { Component, PropTypes } from 'react';

export default class UserRepos extends Component {
  static propTypes = {
    username: PropTypes.string.isRequired,
    repos: PropTypes.array.isRequired
  }
  render(){
    return (
      <div>
        <p> GIT仓库 </p>
        <p> REPOS: {this.props.repos}</p>
      </div>
    )
  }
}

代码清单；app/components/UserProfile/UserProfile.jsx

import React, { Component, PropTypes } from 'react';

export default class UserProfile extends Component {
  static propTypes = {
    username: PropTypes.string.isRequired,
    bio: PropTypes.object.isRequired
  }
  render(){
    return (
      <div>
        <p> 基本信息 </p>
        <p> 姓名: {this.props.username} </p>
        <p> 介绍：{this.props.bio.name}</p>
      </div>
    )
  }
}