useContext跨组件传值步骤

1.导入并调用createContext方法，得到Context对象，导出

import { createContext } from 'react'
export const Context = createContext()

2.使用 Provider 组件包裹根组件，并通过 value 属性提供要共享的数据

return (
  <Context.Provider value={ 这里放要传递的数据 }>
  	<根组件的内容/>
  </Provider>
)

3.在任意后代组件中，获取公共数据

import React, { useContext } from 'react'
import { Context } from './某个文件'
const 函数组件 = () => {
    const 公共数据 = useContext(Context)
    return ( 函数组件的内容 )
}

具体代码图示 这里根组件app.js传递了一个changeNum方法

import React, { useContext } from 'react'
import { Context } from '../../app'
import './index.scss'
export default function MyCount (props) {
  console.log('(props结果是', props)
  解构出it对象
  const { it } = props
  const res = useContext(Context)
  console.log('res333', res)
  解构出changeNum 方法
  const { changeNum } = useContext(Context)
  return (
    <div className="my-counter">
      <button
      type="button"
      className="btn btn-light"
      onClick={() => { changeNum(it.id, it.goods_count - 1) }}
      disabled={it.goods_count === 1}
      >
        -
      </button>
      <input
      type="number"
      className="form-control inp"
      value={it.goods_count}
      onChange={() => {

      }}

       />
      <button
      type="button"
      className="btn btn-light"
      onClick={() => { changeNum(it.id, it.goods_count + 1) }}
      >
        +
      </button>
    </div>
  )
}