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

【问题标题】：Is it possible to pass context into a component instantiated with ReactDOM.render?是否可以将上下文传递到使用 ReactDOM.render 实例化的组件中？
【发布时间】：2016-07-05 20:28:35
【问题描述】：

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

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

是否可以手动将 React context 传递到 MyComponent 的实例中？

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

我想知道是否可以手动保持context 链继续运行，而不是让组件需要在context 和props 中查找某些数据。

反应版本：0.14.8

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

没有。在 react 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
);

【讨论】：

我怀疑手动继续context 链是不可能的。 React 文档和我可以解释的源代码看起来是不可能的，但我想确定一下。我在其他地方看到过类似的解决方案。
嘿，你能稍微扩展一下这个解决方案吗，我不太确定它是如何工作的，我遇到了类似的事情，我试图根据事件管理元素的渲染但其中一些元素需要 ReactReduxContext（或者我相信）
@steff_bdh 它动态地创建上下文提供者，其中包含特定字段。但是，这已经是一个遗留 API，redux 可能已经在使用新的 API。您可以使用示例代码为您尝试解决的问题创建一个新问题吗？

【解决方案2】：

在 React 15 和更早版本中，您可以使用 ReactDOM.unstable_renderSubtreeIntoContainer 代替 ReactDOM.render。第一个参数是你要传播的上下文的组件（通常是this）

在 React 16 及更高版本中，有“门户”API：https://reactjs.org/docs/portals.html

【讨论】：