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

小编典典

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

reactjs

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

阅读 447

2020-07-22

共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
);

2020-07-22