useContext

Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。 useContext Hook 提供了访问 Context 的方法。

注意：React Context 的所有细节和原理参见 Context。

用法

RES
let value = React.useContext(myContext)

接收一个 React.Context.t 参数（从 React.createContext 返回的值），然后返回该 Context 的当前值。Context 的当前值由组件树中调用 useContext 的组件上方最近的 <MyContext.Provider> 的 value prop 决定。

示例

简单的 ThemeProvider

ReScriptJS Output

// App.res
module ThemeContext = {
  let context = React.createContext("light")

  module Provider = {
    let provider = React.Context.provider(context)

    @react.component
    let make = (~value, ~children) => {
      React.createElement(provider, {"value": value, "children": children})
    }
  }
}

module ThemedButton = {
  @react.component
  let 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.component
  let make = () => {
    <div> <ThemedButton /> </div>
  }
}

@react.component
let make = () => {
  <ThemeContext.Provider value="dark">
    <div> <Toolbar /> </div>
  </ThemeContext.Provider>
}