渲染时React 16上下文提供程序返回未定义

Question

我正在使用React的新上下文API（v16.x）。

我制作了一个简单的测试应用程序，以确保对它的理解：

const MyContext = React.createContext();

const Child = () => (
  <MyContext.Consumer>
    {value => value}
  </MyContext.Consumer>
)

const Parent = () => (
  <MyContext.Provider value={"Working"}>
    <Child/>
  </MyContext.Provider>
)

即使在<Parent>和<Child>之间的中间组件，也可以正常工作。

但是，下面的组件会产生以下错误：“元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义” （注意：我正在使用material-ui库）

let NavigationPanel = (props) => (
  <DisabledContext.Provider value={props.disabled}>
    <InstructionsContext.Provider value={props.onOpenInstructions}>
      <Hidden mdUp><DrawerNavigationPanel data={props.data}/></Hidden>
      <Hidden smDown><StaticNavigationPanel data={props.data}/></Hidden>
    </InstructionsContext.Provider>
  </DisabledContext.Provider>
)

为什么会这样？