ReactJS_13 React Refs、this.props.children及props的验证

React Refs

React 支持一种非常特殊的属性 Ref ，你可以用来绑定到 render() 输出的任何组件上。

这个特殊的属性允许你引用 render() 返回的相应的支撑实例（ backing instance ）。这样就可以确保在任何时间总是拿到正确的实例。

使用方法

绑定一个 ref 属性到 render 的返回值上：

在其它代码中，通过 this.refs 获取支撑实例:

var input = this.refs.myInput;
var inputValue = input.value;
var inputRect = input.getBoundingClientRect();

完整示例：

class MyComponent extends React.Component {
  handleClick() {
    // 使用原生的 DOM API 获取焦点
    this.refs.myInput.focus();
  }
  render() {
    //  当组件插入到 DOM 后，ref 属性添加一个组件的引用于到 this.refs
    return (
      

        
        
      
    );
  }
}
 
ReactDOM.render(
  ,
  document.getElementById('example')
);

this.props.children

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

子节点

组件经常会写入很多子属性，就像我们HTML当中的

或
下，一定有很多
• 标签。这种子属性的需求，就要用到this.props.children属性。

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

  class NoteList extends React.Component{
          render(){
              return(
                  
  
                      { React.Children.map(this.props.children,function(child){
                          return(
                              
  {child}
                          ) })
                      }
                  
              )
          }
      }
      ReactDOM.render(
          < NoteList >
              Hello
              World
              React教程
          ,
          document.getElementById('root')
      );
  

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

  props属性验证

  组件的属性是可以接收任何值的，但有时候我们希望对外界父级组件传递进来的属性数据进行限定，比如希望name属性不能缺少、onClick属性必须是函数类型等，这对确保组件被正确使用非常有意义。为此React引入了propTypes机制。React.PropTypes提供各种验证器（validator）来验证传入数据的有效性。当向props传入无效数据时，React会在JavaScript控制台抛出警告。
  注意：React.PropTypes 在 React v15.5 版本后已经移到了 prop-types 库。

  Props 验证使用 propTypes，它可以保证我们的应用组件被正确使用，React.PropTypes 提供很多验证器 (validator) 来验证传入数据是否有效。当向 props 传入无效数据时，JavaScript 控制台会抛出警告。

  以下实例创建一个 Mytitle 组件，属性 title 是必须的且是字符串，非字符串类型会自动转换为字符串 ：
  React 16.4 版本实例：

  //需引入prop-types.js文件
  class MyTitle extends React.Component{
          render(){
              return(
                  
  {this.props.title}
              )
          }
      }
      MyTitle.propTypes = {
          title: PropTypes.string  //要求传入的值必须是字符串
      };
      const data=123; //此时的值是数字
      ReactDOM.render(,document.getElementById('root'));
  

  React 15.4 实例：

  //无需引入prop-types.js文件
  var MyTitle = React.createClass({
    propTypes: {
      title: React.PropTypes.string.isRequired,
    },
   
    render: function() {
       return 
   {this.props.title} 
  ;
     }
  });
   const data=123;
  ReactDOM.render(
      ,
      document.getElementById('example')
  );
  

  在页面显示上是没有问题的，但是现在闯入的数值类型不符合，所以，控制台里面会报错：

  
  
  

  页面显示

  改变title的值属性为字符型，就不会有报错：

  const data='React教程'; //此时的值是字符