大家好，我是梅巴哥er， 本篇介绍context跨层级传递参数。
什么是跨层级传递参数？
- 正常的参数传递是： 父组件想用孙子组件，需要把参数传递过去。这时候就需要先把参数传给子组件，然后由子组件传递给孙子组件，这样层层传递的过程。
- 跨层级传递参数是：父组件想用孙子组件，就让组件进行层层传递，但是参数不用再层层传递。把参数放入context里，孙子组件接收这个参数就可以了。
要想用context，先了解一下上篇内容: prop-types， 因为需要用到这个知识。
进入正题---------------
先来看下不跨层级传递参数：
import React, {
Component } from 'react'
class Grandson extends Component {
render() {
return (
<header>
// 孙子组件接收来自子组件的参数
{
this.props.title }
</header>
)
}
}
class Child extends Component {
render() {
return (
{
/* 子组件先拿到父组件的参数
然后 传递给孙子组件 */}
<Grandson title={
this.props.title } />
)
}
}
class App5 extends Component {
render() {
return (
{
/* 父组件的参数 title
通过Child组件 传递给子组件*/}
<Child title='标题' />
)
}
}
export default App5
再来看看context跨层级传递参数：
import React, {
Component } from 'react'
import PropTypes from 'prop-types'
class Grandson extends Component {
// 3， 设置参数类型
static contextTypes = {
title: PropTypes.string
}
render() {
return (
<header>
{
/* 这里说明，携带参数的，已经不是props了，
而是context */}
{
this.context.title }
</header>
)
}
}
class Child extends Component {
render() {
return (
<Grandson />
)
}
}
class App5 extends Component {
// 2，设置参数类型 写法固定
static childContextTypes = {
title: PropTypes.string
}
// 1，返回一个对象，里面是携带的参数。固定写法
getChildContext() {
return {
title: '标题'
}
}
render() {
return (
<Child />
)
}
}
export default App5
context应用场景：
如果需要让参数层层传递，这时候可以用context。但是context并不是唯一的和最好的处理方式。
官方给出的例子中，组合组件也是处理参数传递的不错的选择。