iT邦幫忙

2022 iThome 鐵人賽

DAY 19
0
Modern Web

Dear React 修煉之路系列 第 19

(D-19) Dear React 修煉之路:React | useContext -2

  • 分享至 

  • xImage
  •  

useContext(Context)讓我們能夠使用 Context 提出的 API
它可以接受 React.createContext() 的value作為參數,返回到最新的 Context

我們可以透過建立 React.createContext() 資料,把資料給予 Context,再利用 useContext(Context) 在元件中調用 Context 拿到裡面的資料

const Context = React.createContext({ theme: 'light', name: 'ABC'})
// 元件 1
const ComponentOne = () => {
    const context = useContext(Context)
    
    return <div>
        { context.theme }
    </div>
}

// 元件 2
const ComponentTwo = () => {
    const context = useContext(Context)
    
    return <div>
        { context.name }
    </div>
}

上一篇
(D-18) Dear React 修煉之路:React | useContext -1
下一篇
(D-20) Dear React 修煉之路:React | useContext -3
系列文
Dear React 修煉之路30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言