Question

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

$('.but_deleteMaterial').on('click',function(e){
e.preventDefault();

$.get('/scripts/delete_material.asp?action=delete&cID='+cID,function(){
  this.closest('.row').hide(); // hide the row that was deleted.
}.bind($(this)));

是否可以手动将React ReactDOM.render(<MyComponent prop1={someVar} />, someDomNode);传递到context的实例？

我知道这听起来像是一个奇怪的问题，鉴于React的本质，但用例是我将React与语义UI（SUI）混合在一起，这个特定情况是懒惰加载SUI工具提示的内容（内容工具提示首次显示时，工具提示是使用与上述相同的代码模式的React组件。因此，它不是由另一个React组件隐式创建的React组件，它似乎会破坏MyComponent链。

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

反应版本：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
);

Answer 2

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

在React 16及更高版本中，有＃34; Portal＆＃34; API：https://reactjs.org/docs/portals.html

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

2 个答案: