React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。

由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。

一、this.props.children详解

this.props 对象的属性与组件的属性一一对应，但是有一个例外，就是 this.props.children 属性。它表示组件的所有子节点。示例代码如下：

代码运行结果如下图所示：

运行结果显示

var NotesList = React.createClass({
  render: function() {
    return (
      
      {
        React.Children.map(this.props.children, function (child) {
          return {child};
        })
      }
      
    );
  }
});

ReactDOM.render(
  
    hello
    world
  ,
  document.body
);

上面代码的 NoteList 组件有两个 span 子节点，它们都可以通过 this.props.children 读取。

注意：

this.props.children 的值有三种可能：如果当前组件没有子节点，它就是 undefined ;如果有一个子节点，数据类型是 object；如果有多个子节点，数据类型就是 array。所以，处理 this.props.children 的时候要小心。

React 提供一个工具方法 React.Children 来处理 this.props.children 。我们可以用 React.Children.map 来遍历子节点，而不用担心 this.props.children 的数据类型是 undefined还是 object。更多的 React.Children 的方法，请参考官方文档。

二、PropTypes

组件的属性可以接受任意值，字符串、对象、函数等等都可以。有时，我们需要一种机制，验证别人使用组件时，提供的参数是否符合要求。组件类的PropTypes属性，就是用来验证组件实例的属性是否符合要求，示例代码如下：

运行结果显示如下：

运行结果显示

var MyTitle = React.createClass({
  propTypes: {
    title: React.PropTypes.string.isRequired,
  },

  render: function() {
     return  {this.props.title} ;
   }
});

上面的Mytitle组件有一个title属性。PropTypes 告诉 React，这个 title 属性是必须的，而且它的值必须是字符串。现在，我们设置 title 属性的值是一个数值。

var data = 123;

ReactDOM.render(
  ,
  document.body
);

这样一来，title属性就通不过验证了。控制台会显示一行错误信息。

Warning: Failed propType: Invalid prop `title` of type `number` supplied to `MyTitle`, expected `string`.

如下图所示：

错误信息显示

更多的PropTypes设置，可以查看官方文档。此外，getDefaultProps方法可以用来设置组件属性的默认值。示例代码如下：

var MyTitle = React.createClass({
  getDefaultProps : function () {
    return {
      title : 'Hello World'
    };
  },

  render: function() {
     return  {this.props.title} ;
   }
});

ReactDOM.render(
  ,
  document.body
);

上面代码会输出"Hello World"。

React进阶（二）

一、this.props.children详解

注意：

二、PropTypes

{this.props.title}

{this.props.title}

你可能感兴趣的:(React进阶（二）)