本文已参与「新人创作礼」活动，一起开启掘金创作之路。

组件通讯

1.组件的props

• 组件是封闭的，要接收外部数据应该通过props来实现

• props的作用：接收传递给组件的数据

• 传递数据：给组件标签添加属性

  <Hello name="jack" age={19}></Hello>
  
  fucntion Hello(props){
      console.log(props)
      return(
      	<div>接收到数据：{props.name}</div>
      )
  }
  

• 可以给组件传递任意类型的数据

• props是只读的对象，只能读取属性的值，无法修改对象

• 注意：使用类组件时，如果写了构造函数，应该将props传递给super(props)，否则无法在构造函数中获取props

2.组件通讯的三种方式

• 父组件 -> 子组件

  使用props接收父组件传递的数据

• 子组件 -> 父组件

  /*
  1. 父组件提供一个回调函数
  */
  
  class Parend extends React.Component{
      getChildMsg = (msg) => {
          console.log('接收到的子组件参数：',msg)
      }
      render(){
          return (
          	<div>
              	子组件:<Child getMsg={this.getChildMsg} />
              </div>
          )
      }
  }
  

• 兄弟组件

  /*
  1. 将共享状态提升到最近的公共父组件中，由公共父组件管理这个状态
  （偷懒省略一点...）
  */
  

3.Context

跨组件传递数据

/*
1. 调用React.createContext() 创建 Provider(提供数据)和Consumer(消费数据)两个组件.
2. 使用Provider组件作为父节点
3. 设置value属性，表示要传递的数据
*/

const {Provider, Consumer} = React.createContext()

<Provider value="pink">
	<div className="App">
    	<Child1 />
    </div>
</Provider>
    
<Child1>
	<Consumer>
        {data=><span>{data}</span>}
    </Consumer>    
</Child1>

4.children 属性

表示组件标签的子节点，当组件标签有子节点时，props就会有该属性

5.props校验

• props 是外部传入的参数，无法保证组件使用者传入什么格式的数据

• props校验，允许创建组件时，指定props的类型、格式等

  App.propTypes = {
      colors: PropTypes.array
  }
  

• 使用需要安装包: npm i prop-types

• 常见类型：array、bool、func、number、object、string

• React元素类型：element

• 必填项：isRequired

• 特定结构的对象：shape({})

6.props默认值

• 设置props的默认值，App.defaultProps = { colName : defaultValue }