react基础之--父子间通信 props传值 以及prop-types的基本使用

步骤：

1.父组件调用子组件时传入属性

2.子组件直接通过this.props.属性名   即可拿到父组件传过来的值

父组件代码：

import React from 'react'
import Child from '../components/child1'

export default class Home extends React.Component{
    constructor(props) {
        super(props)
        this.state = {
          list: [
          msg:44
        }

      }
     
      Fn(){
        return '我是父组件传递的函数'
      }


    render (){
        return (
            <div>
              
              {/**
               * 父子组件传值  可以传递 
               * 
               */}
              <Child 
                aaa = {this.state.msg}
                fn = {this.Fn}
              ></Child>
              
            </div>
          )

    }
} 

子组件代码：

import React from 'react'

export default class Child extends React.Component{
  render (){
    return(
      <div>
        {this.props.aaa}
        <br />
        {this.props.fn()}
      </div>
    )
  }

  
}

显示效果：

但除了这些  还可以传递什么类型的数据呢，以及数据类型是如何进行检测的  vue里面的props能接收一个判断数据类型的参数，react没有，  这个时候需要用到一个第三方库   prop-types   

安装： npm install --save prop-types

使用背景： 1.当需要接收的数据是number型数据，而父组件却传递了“1”

　　　　　 2.忘记传递数据   可以进行默认值的设置  

当父子组件间通过props传递数据时，通过对组件数据进行类型检测，有效监控数据 —— 当数据传递类型出错或者传递空数据可以迅速找到出错的准确位置，更省时方便。

propTypes：用来验证类型和是否必传
defaultProps:用来设置未传参时的默认值

//具体写法： 
yourComponent.propTypes = {
    属性1：属性1的变量类型，
    属性2：属性2的变量类型
    //...
}

propTypes能用来检测全部数据类型的变量，包括基本类型的的字符串，布尔值，数字，以及引用类型的对象，数组，函数，甚至还有ES6新增的符号类型   并且可以设置必填

Child.propTypes = {
     optionalArray: PropTypes.array,//检测数组类型
     optionalBool: PropTypes.bool,//检测布尔类型
     optionalFunc: PropTypes.func,//检测函数（Function类型）
     optionalNumber: PropTypes.number,//检测数字
     optionalObject: PropTypes.object,//检测对象
     optionalString: PropTypes.string,//检测字符串
     optionalSymbol: PropTypes.symbol,//ES6新增的symbol类型
}

举个栗子：   optionalArray 传递的数据类型为数组  并且为必传项

Child.propTypes = {
     optionalArray: PropTypes.array.isRequired,//检测数组类型
}

当我们只想控制必填 不想控制数据类型时  可以使用   

 PropTypes.any.isRequired

 

我们可以 在和子组件同级的地方  去定义关于props相关的设置    具体写法如下：

import React from 'react'
import  PropTypes  from  'prop-types'  


export default class Child extends React.Component{
  render (){
    return(
      <div>
        {this.props.aaa}
        <br />
        {this.props.fn()}
      </div>
    )
  }
}

 Child.propTypes = {
   aaa:PropTypes.number,
 }
 Child.defaultProps = {
   aaa:2
 }

也可以 与 render(){} 同级， 利用static静态属性将验证写在类的里面   这是es7下的新写法

import React from 'react'
import  PropTypes  from  'prop-types'  

export default class Child extends React.Component{
  render (){
    return(
      <div>
        {this.props.aaa}
        <br />
        {this.props.fn()}
      </div>
    )
  }
  static propTypes = {
    aaa:PropTypes.number,
  }
  static defaultProps = {
    aaa:2
  }

}

假如我们数据类型传错了呢    栗子：  msg : 44   变成了  msg:'44'   number  变成了 string

此时并不影响我们的页面展示   但是会在控制台有报错信息展示出来     aaa 代表传递的prop属性   sring  当前aaa的类型   Child  位于哪个组件内    expected  期望是 哪种数据类型 

【注意】下面这些是从官方英文文档里引用过来的，你大概能够注意到，五种基本类型中的不确定和空并不在此列，propTypes类型检测的缺憾之一是，对于不确定的和无效的值，它无法捕捉错误

让我们把上述实例中的父组件传递给子组件修改一下，改成：

 

class Father extends React.Component{
    render(){
       return (<Son
                 number = {null}
                 array = {null}
                 boolean = {null}
                />)
             }
}

结果是输出台不报任何错误，（当然你改成未定义也是同样效果）。

 

通过oneOfType实现多选择检测-可规定多个检测通过的数据类型

上个例子中类型检测的要求是一个变量对应一个数据类型，也就是规定的变量类型只有一个。那么怎样能让它变得灵活一些，比如规定多个可选的数据类型都为检测通过呢？ PropTypes里的oneOfType方法可以做到这一点，oneOfType方法接收参数的是一个数组，数组元素是你希望检测通过的数据类型。

<Child 
   aaa = {this.state.msg}
   fn = {this.Fn}
   ccc = {this.state.msg2}
></Child>

static propTypes = {
    aaa:PropTypes.number.isRequired,
    ccc:PropTypes.oneOfType(
      [PropTypes.string,PropTypes.number]
    )
  }

如果ccc  是 ‘311213aaaa’  或者 123  ， 控制台不会有报错 但是如果是 数组或其他类型的变量  控制台就会产生报错

 

 

通过形状方法检测目标对象不同属性的不同数据类型

如果你认真思考一下的话，你会发现3.4中的objectOf有一个缺陷，就是它内部的属性的数据类型被强行规定为一种，但通常一个对象里应该是有多种不同类型的属性了，那么这时候objectOf就不符合要求了，我们应该使用形状方法，其用法：

PropTypes.shape({
   属性1：类型1，
   属性2：类型2，
  //...
}),

this.state = {
   obj:{
     name:'ks',
     age:18
   }
}

<Child 
  aaa = {this.state.msg}
  fn = {this.Fn}
  ccc = {this.state.msg2}
  ddd = {this.state.obj}
></Child>


// 子组件内
render (){
    return(
      <div>
        {this.props.ddd.name} -- {this.props.ddd.age}
      </div>
    )
  }
  static propTypes = {
    ddd:PropTypes.shape({
      name:PropTypes.string,
      age:PropTypes.number
    })
  }

要求name 是 string类型  age为number类型  否则会产生控制台报错