利用上下文对象——传值

context

context,翻译为上下文。在以前的学习中我们就接触过上下文这一说法，比如vue3中setup的第二个形参是一个context上下文，canvas中生成绘画环境有一个getcontext。具体context是什么意思，我也说不清，大家可以自行了解。、

在React中的context,它属于React的高级API。很多优秀的React组件都通过Context来完成自己的功能，比如react-redux的< Provider />，就是通过Context提供一个全局态的store，拖拽组件react-dnd，通过Context在组件中分发DOM的Drag和Drop事件，路由组件react-router通过Context管理路由状态等等。在React组件开发中，如果用好Context，可以让你的组件变得强大，而且灵活。

使用

今天我们来学习如何利用它来实现多组件之间的传值。

如果要Context发挥作用，需要用到两种组件，一个是Context生产者(Provider)，通常是一个父节点，另外是一个Context的消费者，通常是一个或者多个子节点。所以Context的使用基于生产者消费者模式。

首先第一步，我们需要通过静态方法React.createContext()创建一个Context对象，用来承载我们父元素传递信息。

import React, { Component } from 'react'
const ctx=React.createContext({
    msg:""
})
export default ctx

然后我们在父组件中引入ctx，并用ctx对象的provider 提供信息：传递的信息写在value中，并以对象形式。

       <Ctx.Provider value={
   
   {msg:"app组件的信息",count:100}}>
            <Box3></Box3>
        </Ctx.Provider>

box3作为我们的一个过渡组件，我们再在box3组件中引入box4作为它的子组件，实现祖训之间值得传递。

import React, { Component } from 'react'
import Box4 from './box4'
export default class box3 extends Component {
  render() {
    return (
      <div className='box3'>box3
      <Box4></Box4>
      </div>
    )
  }
}

最后我们需要在box4中接收上下文ctx对象内的信息，发出需要引入ctx组件，同样我们接收也需要引入并调用consumer方法。代码：

import React, { Component } from 'react'
import Ctx from './ctx'
export default class box4 extends Component {
  render() {
    return (
      <div>
        <Ctx.Consumer>
            {
                (data)=>{return <div>Box4--{data.msg}--{data.count}</div>}
            }
        </Ctx.Consumer>
      </div>
    )
  }
}
box4.contextType=Ctx;

这里我们需要用函数的方式来获取，我们provider时传入的信息将会传入我们设置的形参data中，我们通过对象点语法就可以获取到。

最后注意一点：我们在获取ctx上下文对象的组件中，必须要在末尾添加上-----------------接受值的后代组件名.contextType = "导入的上下文对象的组件名（这里为Ctx）"

否则获取不到。

利用上下文对象——传值

context

使用

猜你喜欢