ReactJS_13 React Refs、this.props

React Refs

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

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

使用方法

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

<input ref="myInput" />

在其它代码中，通过 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 (
      <div>
        <input type="text" ref="myInput" />
        <input
          type="button"
          value="点我输入框获取焦点"
          onClick={this.handleClick.bind(this)}
        />
      </div>
    );
  }
}
 
ReactDOM.render(
  <MyComponent />,
  document.getElementById('example')
);

this.props.children

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

子节点

组件经常会写入很多子属性，就像我们HTML当中的<ol>或<ul>下，一定有很多<li>标签。这种子属性的需求，就要用到this.props.children属性。

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

class NoteList extends React.Component{
        render(){
            return(
                <ol>
                    { React.Children.map(this.props.children,function(child){
                        return(
                            <li>{child}</li>
                        ) })
                    }
                </ol>
            )
        }
    }
    ReactDOM.render(
        < NoteList >
            <span>Hello</span>
            <span>World</span>
            <span>React教程</span>
        </NoteList >,
        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 库。

<script src="https://cdn.bootcss.com/prop-types/15.6.1/prop-types.js"></script>

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

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

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

React 15.4 实例：

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

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

页面显示

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

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