index.jsx:
import React from 'react'
import { Provider } from "./context";
import C from "./C";
// const MyContext = React.createContext();
// const { Provider, Consumer } = MyContext;
export default function A() {
const [count, setCount] = React.useState(0);
function add() {
setCount(count => count + 1)
}
return (
<div>
<div>这是A组件</div>
<button onClick={add}>加一</button>
<Provider value={{ count, setCount }}>
<B />
</Provider>
</div>
)
}
function B() {
return (
<div>
这是B组件
<C />
</div>
)
}
C.jsx:
import { Consumer } from "./context";
export default function C() {
return (
<div>
这是C组件
<Consumer>
{
value => {
debugger
return value.count
}
}
</Consumer>
</div>
)
}
context.jsx:
import { createContext } from "react";
const myContext = createContext()
export const { Provider, Consumer } = myContext
当我们在处理祖孙组件或者更深层次的组件时，可以使用React身上的 createContext() 这个方法
执行createContext，可以接收一个实例，并且实例身上有两个API: Provider、Consumer
我们在父组件的中子组件外包裹<Provider></Provider>标签，并向标签传入value属性
在孙组件或者更深层次的组件中使用<Consumer></Consumer>标签来接收传入的值
<Provider value={{ count, setCount }}>
<B />
</Provider>
<Consumer>
{
value => value.count // 传入了count，这里就用value.count接，value代表传入的对象集合
}
</Consumer>
