通过 context 来传值

  1. Const { Provider , Consumer } = React.createContext();
  2. <Provider value=”pink”></Provider>    传递数据
  3. <Consumer>{ data => <span>我是子节点—{ data }</span> }</Consumer>    接收数据
  6. // Provider 是写在最外层的
  7. <Provider value={this.sate.num}>
  8.   <div className='parent'>
  9.     <Father />
  10.   </div>
  11. </Provider>
  13. // Consumer 哪里用就在哪里写
  14. <div className='son'>
  15.   <Consumer>
  16.       {
  17.           data => console.log(data)
  18.         }
  19.   </Consumer>
  20. </div>

Props

  • Props的值可以是任意类型
  • 也可以添加验证规则来规范传的值

在组件调用的时候写成双标签给里面写内容的话，就相当于给此组件通过props传了数据，
数据是一个对象里面有个children键值,如果传的是一个函数的话，那么props.children拿到的就是这个函数，如果传的是字符串，那么同理，但是如果是标签的话，props.children就是一个虚拟的DOM对象

  1. <Son>{hello}</Son>
  2. 这样传值只能通过props.children来取值
  4. <Son data={hello}/>
  5. 这样传值的话直接通过props.data就能取到值

Prop-types 一个第三方包，来给组件的props添加校验规则

Props传值规则

参考网站：https://www.jianshu.com/p/3b4dfdd98ead