商店没有被传递到连接的 cellrendererframework

Question

我正在使用以下组件：反应 v.16.5 反应还原 v.6.0 农业网格 v.18.1

我正在使用 cellRendererFramework 在 ag-grid 的一个单元格中显示自定义组件。但是，一旦我将此自定义组件设为连接组件，

错误：

Could not find "store" in the context of "Connect(TestComponent)". Either wrap the root component in a , or pass a custom React context provider to and the corresponding React context consumer to Connect(TestComponent) in connect options.

ag-grid中的colDef如下：

{
  field: "TestField",
  headerName: "Test Field",
  rowGroup: false,
  cellRendererFramework: TestComponent
}


// TestComponent.js
import React, {Component} from 'react';
import {connect} from 'react-redux';

class TestComponent extends Component {

  render() {
    return(<div>Hello</div>);
  }    
}

export default connect()(TestComponent);

我已经创建了商店并在 Index.js 级别定义了提供商。是不是cellrendererFrameworks连接不上？

我在另一个堆栈溢出中遇到了这个问题 post 但他们说这个问题已经在 React 版本中得到解决。 13?
https://github.com/ag-grid/ag-grid-react/issues/88

请注意，这不是为了编写测试用例 - 我需要实际连接 TestComponent。

请有人帮忙解决这个问题，因为嵌套组件被阻止连接似乎是一个非常基本的错误。

Answer 1

来自docs and lilbumbleber's response：

With React 16 Portals were introduced and these are the preferred way to create React components dynamically. If you wish to try use this feature you'll need to enable it as follows:

// Grid Definition
<AgGridReact
    reactNext={true}
    ...other bindings

If you use connect to use Redux, or if you're using a Higher Order Component to wrap the React component at all, you'll also need to ensure the grid can get access to the newly created component. To do this you need to ensure forwardRef is set:

export default connect(
    (state) => {
        return {
            currencySymbol: state.currencySymbol,
            exchangeRate: state.exchangeRate
        }
    },
    null,
    null,
    { forwardRef: true } // must be supplied for react/redux when using GridOptions.reactNext
)(PriceRenderer);

所以，您可以尝试将这两个相加：

将 reactNext={true} 添加到 <AgGridReact/> 组件
改变 connect()(TestComponent); 到 connect(null, null, null, { forwardRef: true })(TestComponent);

编辑：此错误已在 version 20.x

中修复

商店没有被传递到连接的 cellrendererframework

Store not getting passed down to connected cellrendererframework

redux

ag-grid