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

使用Props

var HelloMessage = React.createClass({
      render: function() {
    return <h1>Hello {this.props.name}</h1>;
  }
});

ReactDOM.render(
  <HelloMessage name="Runoob" />,
  document.getElementById('example')
);

默认Props

可以通过getDefaultProps()方法为props设置默认值

var WebSite = React.createClass({
  getInitialState: function() {
    return {
      name: "菜鸟教程",
      site: "http://www.runoob.com"
    };
  },

  render: function() {
    return (
      <div>
        <Name name={this.state.name} />
        <Link site={this.state.site} />
      </div>
    );
  }
});

var Name = React.createClass({
  render: function() {
    return (
      <h1>{this.props.name}</h1>
    );
  }
});

var Link = React.createClass({
  render: function() {
    return (
      <a href={this.props.site}>
        {this.props.site}
      </a>
    );
  }
});

React.render(
  <WebSite />,
  document.getElementById('example')
);

Props验证

Props 验证使用 propTypes，它可以保证我们的应用组件被正确使用，React.PropTypes 提供很多验证器 (validator) 来验证传入数据是否有效。当向 props 传入无效数据时，JavaScript 控制台会抛出警告。
以下实例创建一个 Mytitle 组件，属性 title 是必须的且是字符串，如果是一个数字则会报错 ：

var title = "jimliu";
var MyTitle = React.createClass({
    propTypes : {
        title : React.PropTypes.string.isRequired
    },
    render : function () {
        return <h1>{this.props.title}</h1>
    }
});
ReactDOM.render({
    <MyTitle title = {title} />,
    document.getElementById('container');
})