React学习之useContext

具有树状结构关系组件之间传参可使用useContext进行跨组件之间进行传参

1、parent组件

import { useState } from "react"; import { Child } from "./Child"; import { ThemeContext } from "./UseContext"; export const UseContext = () => { //定义一个修改主题的函数 const [theme, setTheme] = useState<string>("light"); //定义一个切换主题的函数 const toggleTheme = () => { setTheme(theme === "light" ? "dark" : "light"); }; //定义需要传送的信息 const props = { name: "张三", age: 0 }; return ( <div> <p>{theme}</p> <ThemeContext.Provider value={{ theme, toggleTheme, props }}> <Child /> <button onClick={toggleTheme}>切换主题</button> </ThemeContext.Provider> </div> ); };

2、child组件

import {GrandChild} from './GrandChild' import { useContext } from 'react'; export const Child = () => { console.log('子组件') return ( <div> <p>子组件---</p> <GrandChild></GrandChild> </div> ); };

3、GrandChil组件

import { UseTheme } from "./useTheme"; export const GrandChild = () => { //引入自定义hook const { theme, toggleTheme, props } = UseTheme(); const toggleTheme2 = () => { //更改主题的方法 toggleTheme(); }; return ( <div> <p>传递的值----{theme}</p> <p> {props.name}---{props.age || 999} </p> <button onClick={toggleTheme2}>切换主题---通过改变顶层级数据</button> </div> ); };

4、UseContext组件

import { createContext } from "react"; export const ThemeContext = createContext({ theme: "light", toggleTheme: () => {}, // 默认空函数，避免消费时报错 props: { name: "", age: 0 }, });

5、useTheme组件（可把GrandChild组件内的获取数据方法单写成一个hook，实现功能抽离）

import { useContext } from "react"; import { ThemeContext } from "./UseContext"; export const UseTheme = () => { const { theme, toggleTheme, props } = useContext(ThemeContext); return { theme, toggleTheme, props }; };