一、前言

如果需要在组件之间进行传值，那么属性就起到了这个作用,在中和是两个非常重要的属性。

和 主要区别在于 是不可变的，而 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 来更新和修改数据。 而子组件只能通过 来传递数据。

Note:属性是用于设置默认值，不改变的值使用,改变的值使用.

Person.propTypes = {
    name: React.PropTypes.string.isRequired,
    age: React.PropTypes.number.isRequired
}

Person.defaultProps = {
  name: 'Mary'
};

二、Demo

/*
   1. 拆分组件: 拆分界面, 抽取组件
     * 单个标题组件: Welcome
     * 应用组件: App
   2. 分析确定传递数据和数据类型
     * Welcome: props.name  string
     * App: props.names    array
   */

  //定义内部标题组件
  class Welcome extends React.Component {
    render() {
      return 
Welcome {this.props.name}!
;
    }
  }
  Welcome.propTypes = {
    name: React.PropTypes.string.isRequired
  };
  //定义外部应用组件
  class App extends React.Component {
    render() {
      return (
        

          {
            this.props.names.map(
              (name, index) => 
            )
          }
        
      );
    }
  }
  App.propTypes = {
    names: React.PropTypes.array.isRequired
  };

  var names = ['Tom', 'Jack', "Bob"];
  ReactDOM.render(, document.getElementById('example'));

三、拓展阅读

• 《》