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

IT技术 javascript reactjs
2021-04-22 09:47:17

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

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

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

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

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

react版本:0.14.8

2个回答

不。在 react 0.14 之前有 method 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 文档和我对源代码的解释看起来不可能那样,但我想确定一下。我在其他地方看到过类似的解决方案。
2021-05-31 09:47:17
@steff_bdh 它动态创建上下文提供程序,其中包含特定字段。然而,这已经是一个遗留 API,而 redux 可能已经在使用一个新的 API。您能否为您要解决的问题创建一个带有示例代码的新问题?
2021-06-09 09:47:17
嘿,你能稍微扩展一下这个解决方案吗,我不太确定它是如何工作的,我遇到了类似的事情,我试图根据事件管理元素的渲染,但其中一些元素需要 ReactReduxContext (或者我相信)
2021-06-13 09:47:17

在 React 15 及更早版本中,您可以使用ReactDOM.unstable_renderSubtreeIntoContainer代替ReactDOM.render. 第一个参数是您想要传播的上下文的组件(通常this

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