React Hook: useContext

亚历山大 本文由博客端 https://blog.ttvg.cn 主动推送

React Hook: useContext

介绍

应用场景

Demo

import React, { useContext } from 'react'
import { Context } from './context'

const Children: React.FC = () => {
  const data = useContext(Context)
  // data {id: 2, text: "测试2222", other: "hahah"}
  return <div onClick={() => data?.fun && data?.fun()}>{data.text}</div>
}

const Children2: React.FC = () => {
  const data = useContext<{ id: number; text: string }>(Context)
  // data {id: 2, text: "测试2222", other: "hahah"}
  return <div>{data.text}</div>
}

const Demo: React.FC = () => {
  const newData = { id: 2, text: '测试2222' }

  const testFun = () => {
    console.log('testFun', newData.text)
  }

  return (
    <Context.Provider value={{ ...newData, other: 'hahah', fun: testFun }}>
      <Children />
      <Children2 />
    </Context.Provider>
  )
}

export default Demo
import { createContext } from 'react'

export const Context = createContext<{
  id: number
  text: string
  other?: string
  fun?: () => void
}>({
  id: 0,
  text: '测试'
})
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    165 引用 • 266 回帖 • 554 关注
  • hook
    2 引用

广告 我要投放

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...