컨텍스트는 모든 레벨에서 수동으로 props를 전달 할 필요없이 컴포넌트 트리를 통해 데이터를 전달하는 방법을 제공합니다.
useContext
훅은 그러한 컨텍스트 값에 접근 할 수 있습니다.
참고 리액트 컨텍스트의 모든 세부 사항과 이론적 근거는 여기에서 찾을 수 있습니다.
사용법
let value = React.useContext(myContext)
React.Context.t
(React.createContext
에서 반환 된 값)를 수락하고 해당 컨텍스트에 대한 현재 컨텍스트 값을 반환합니다.
현재 컨텍스트 값은 트리의 호출 컴포넌트 위에 있는 가장 가까운 <MyContext.Provider>
의 prop 값에 의해 결정됩니다.
예제
간단한 ThemeProvider
/* App.re */module ThemeContext = {let context = React.createContext("light")module Provider = {let provider = React.Context.provider(context)@react.componentlet make = (~value, ~children) => {React.createElement(provider, {"value": value, "children": children})}}}module ThemedButton = {@react.componentlet make = () => {let theme = React.useContext(ThemeContext.context)let (color, backgroundColor) = switch theme {| "dark" => ("#ffffff", "#222222")| "light" | _ => ("#000000", "#eeeeee")}let style = ReactDOMStyle.make(~color, ~backgroundColor, ())<button style> {React.string("I am a styled button!")} </button>}}module Toolbar = {@react.componentlet make = () => {<div> <ThemedButton /> </div>}}@react.componentlet make = () => {<ThemeContext.Provider value="dark"><div> <Toolbar /> </div></ThemeContext.Provider>}