是否可以将上下文传递给使用ReactDOM.render实例化的组件？

Question

TL; DR给出以下示例代码:

ReactDOM.render(<MyComponent prop1={someVar} />, someDomNode);

是否可以手动将React传递context给实例MyComponent？

我知道这听起来像一个奇怪的问题,鉴于React的本质,但用例是我将React与语义UI(SUI)混合,这个特定情况是懒惰加载SUI工具提示的内容(工具提示的内容是工具提示首次显示时,使用与上述相同的代码模式的React组件.所以它不是由另一个React组件隐式创建的React组件,它似乎打破了context链.

我想知道我是否可以手动保持context链条运行而不是需要在contextAND中查找某些数据的组件props.

反应版本:0.14.8

Answer 1

没有.在反应0.14之前有方法React.withContext,但它被删除了.

但是,您可以通过使用上下文创建HoC组件来实现,它将类似于:

import React from 'react';

function createContextProvider(context){
  class ContextProvider extends React.Component {
    getChildContext() {
      return context;
    }

    render() {
      return this.props.children;
    }
  }

  ContextProvider.childContextTypes = {};
  Object.keys(context).forEach(key => {
    ContextProvider.childContextTypes[key] = React.PropTypes.any.isRequired; 
  });

  return ContextProvider;
}

并使用如下:

const ContextProvider = createContextProvider(context);

ReactDOM.render(
  <ContextProvider>
    <MyComponent prop1={someVar} />
  </ContextProvider>,
  someDomNode
);