如何在react中使用createContext进行跨组件通信

1.新建context/index.js文件

2.导入createContext并按需导出其中的Provider和Consumer

注：如果不需要封装可以在组件中进行导入Provider和Consumer

import { createContext } from 'react'
export const { Provider, Consumer } = createContext()

3.根组件中使用Provider

在根组件中使用Provider进行包裹 value就是你要传的值，如果需要传入多个值使用对象的key：value进行进行传值 

//App根组件
import { Provider } from './components/context'


export default function App (){

// 全选功能
  const goodsCheckedAll = (state) => {
    const newList = goodsList.map((it) => {
      return { ...it, goods_state: state }
    })
    setGoodsList(newList)
  }
  // 数量选择
  const setCount = (id, count) => {
    const newList = goodsList.map((it) => {
      if (it.id === id) {
        return { ...it, goods_count: count }
      } else {
        return { ...it }
      }
    })
    setGoodsList(newList)
  }
 return (
    <Provider value={{ setCount: setCount, addCount: addCount }}>
      <div className="app">
        <MyHeader>购物车</MyHeader>
        {goodsList.map((it) => (
          <GoodsItem
            key={it.id}
            goods={it}
            goodsListChecked={goodsListChecked}
          />
        ))}

        <MyFooter goodsCheckedAll={goodsCheckedAll} goodsList={goodsList} />
      </div>
    </Provider>
  )
}

4.子组件导入并使用Consumer进行包裹  

Consumer的格式是固定的  下面代码中我传入的是一个对象 接收时对他进行结构了

<Comsumer>

{

(value)=>{ value是传入的数据}

}

</Comsumer>

import { Consumer } from '../context/index'
export default function MyCount ({ goods }) {
  return (
    <Consumer>
      {({ setCount, addCount }) => {
        return (
          <div className="my-counter">
            <button
              disabled={goods.goods_count === 1}
              type="button"
              className="btn btn-light"
              onClick={() => {
                addCount(goods.id)
              }}>
              -
            </button>
            <input
              type="number"
              className="form-control inp"
              value={goods.goods_count}
              onChange={(e) => {
                setCount(goods.id, e.target.value)
              }}
            />
            <button
              type="button"
              className="btn btn-light"
              onClick={() => {
                addCount(goods.id, 'add')
              }}>
              +
            </button>
          </div>
        )
      }}
    </Consumer>
  )
}