1. src文件夹下新建ctx/index.jsx import { createContext } from 'react' const Ctx = createContext({ name: '', age: '' }) export default Ctx 2. 在提供数据的组件使用Ctx.Provider组件包裹要接收数据的组件,并使用value值提供数据 import A from './A' import Ctx from './ctx' function App() { return ( <Ctx.Provider value={{ name: '张三', age: 18 }}> <div>我是App组件</div> <A /> </Ctx.Provider> ) } export default App 3. 在接收数据的组件,使用useContext钩子,获取ctx的数据,切记要把ctx/index.jsx文件夹下暴露出来的ctx传入到useContext中 import Ctx from './ctx' import { useContext } from 'react' const C = () => { const ctx = useContext(Ctx) return ( <> <div>我是C组件</div> <div>姓名:{ctx.name}</div> <div>年龄:{ctx.age}</div> </> ) } export default C