在React 应用中,父组件向子组件传递数据是通过 props 属性
如果第一层的父组件向第四层的子组件传一个数据,那么这个数据需要经过第二层和第三层子组件的props,这样会显的很繁琐。那有什么办法可以让第一层的父组件直接向地四层的子组件传数据吗?
答案是有的,context,它提供了一种在组件之间共享此类值的方式。
使用:
创建一个context对象
React.creatContext(defaultValue)
import React, { Component } from 'react'
const localContext = React.createContext()
使用方法一:
使用provide与consumer组合
这个context对象有两个属性
- provide :提供数据,可以定义默认值
Provider下面的consumer都可以拿到这个value
- consumer :订阅数据,消费数据,从这个属性可以获取到数据
consumer要求children是一个函数,函数的第一个参数为value