是否有可能将上下文传递到用ReactDOM.render实例化的组件中?

Is it possible to pass context into a component instantiated with ReactDOM.render?

本文关键字：实例化 render 组件 ReactDOM 有可能 上下文 是否      更新时间：2023-09-26

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

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

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

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

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

React version: 0.14.8

No。在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
);

在React 15和更早的版本中，您可以使用ReactDOM.unstable_renderSubtreeIntoContainer而不是ReactDOM.render。第一个参数是要传播上下文的组件(通常为this)

在React 16及以后的版本中有"Portal"API: https://reactjs.org/docs/portals.html

相关文章：