react button 加颜色_React组件扩展 —— 默认值、属性校验、子组件渲染和容器

《快速上手React编程》CH8 扩展React组件

React中可以对组件进行一些扩展，包括给属性提供默认值（defaultProps）、对属性进行校验（propTypes）、渲染子组件（this.props.children）和容器（HOC 高阶组件）。

1、属性默认值

props的默认值，只需要在组件类外面用defaultProps声明一下就好了。

class Button extends React.Component {
    
  render() {
    
    return <button className="btn" >{
    this.props.buttonLabel}</button>
  }
}
Button.defaultProps = {
    buttonLabel: 'Submit'}

如果是state需要默认值，在constructor声明的时候写一下就好了。

2、属性校验

在大型项目中，可以需要写一些给别人用的组件，为了避免别人传参错误导致各种问题，可以在自己的组件里加个属性校验。

写法是在组件类外面加个propTypes，可以用React原生的