react中Context 的使用

react 中 context 为解决跨组件通信问题 父组件通过 context.Provider 提供数据

孙子组件通过 useContext 进行使用

App.tsx

import { useState } from "react"
import Home from "./components/Home"
// 引入 创建的 context
import ThemeContext from "./context"
import { ThemeContextTypes } from "./data"
const App = () => {const [ThemeParams, setThemeParams] = useState<ThemeContextTypes>({ color: 'blue', size: 30 })/* APP 组件提供数据 */return (<div><ThemeContext.Provider value={ThemeParams}><div>app</div><Home /></ThemeContext.Provider></div>)
}

export default App 

context.ts

import React from "react";
// 创建一个上下文 
const ThemeContext = React.createContext({ color: 'red', size: 30 })

export default ThemeContext 

Home.tsx

import HomeProduct from "./HomeProduct"

const Home = () => {return (<div><HomeProduct></HomeProduct></div>)
} 

HomeProduct.tsx

export default Home 
import { useContext } from "react"
import ThemeContext from "../context"
import { ThemeContextTypes } from "../data"

const HomeProduct = () => {const context: ThemeContextTypes = useContext(ThemeContext)return (<div><div>{context.color}</div><p>大小{context.size}</p></div>)
}

export default HomeProduct 

最后

整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。

有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享

部分文档展示：

文章篇幅有限，后面的内容就不一一展示了

有需要的小伙伴，可以点下方卡片免费领取