react值传递之context

React提供了Context上下文模式，为了解决prop每一层都需要传递的问题。

首先我们可以准备一个context文件

来单独写context的创建与值的获取

context/index.js文件

import React from "react"

const DomContext = React.createContext({})

export const DomProvider = DomContext?.Provider

export const useContextValue = () => {

  return React?.useContext(DomContext)

}

​createContext创建出一个上下文对象

Provider为组件的值传递的提供者

useContext(DomContext) 为消费者

在最外层的Content/index 就可以使用DomProvider把整个组件包裹，

那么子组件就可以通过useContextValue方法获取值

Content/index.js 文件（最外层父组件）

import React, { useState } from "react"

import { DomProvider } from "./context"

import DomOne from "./components/DomOne"

const Content = () => {

  const [value, setValue] = useState({ a: "xiaoa", b: "xiaob", c: "xiaoc" })

  return (

    <DomProvider

      value={{

        value,

        age: 18,

        name: "hy",

        changeValue: (info) => {

          setValue(info)

        },

      }}

    >

      <div>

        <DomOne></DomOne>

      </div>

    </DomProvider>

  )

}

​

export default Content

​DomOne组件（任意子组件，或者嵌套组件）

import { useContextValue } from "../context"

const DomOne = () => {

  const { value, name, changeValue } = useContextValue()

​

  return (

    <div>

      {value?.a}

      <span>姓名：{name}</span>

      <button

        onClick={() => {

          changeValue({

            ...value,

            time: "2024-08-24 15:32:00",

          })

        }}

      >

        改值

      </button>

    </div>

  )

}

export default DomOne

就可以直接使用useContextValue()方法获取值，这样如果页面比较复杂，组件比较多，就可以采用这种方法来处理值的传递与修改会方便和清晰很多