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教程'; //此时的值是字符
