Question

我正在使用以下组件：反应v.16.5 react-redux v.6.0 ag-grid v.18.1

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

错误：

在“ Connect（TestComponent）”的上下文中找不到“ store”。将根组件包装在中，或传递自定义React 上下文提供者和相应的React上下文使用者在连接选项中连接到Connect（TestComponent）。

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无法连接吗？

我在另一个堆栈溢出帖子中遇到了这个问题，但是他们说这个问题已经在react vers中解决了。 13？
https://github.com/ag-grid/ag-grid-react/issues/88

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

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

Answer 1

来自docs和lilbumbleber's response：

在React中引入了16个Portal，这是动态创建React组件的首选方式。如果您想尝试使用此功能，则需要按以下步骤启用它：

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

如果您使用connect来使用Redux，或者如果您使用高级组件完全包装React组件，则还需要确保网格可以访问新创建的组件。为此，您需要确保设置了forwardRef：

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

中修复

存储未传递到已连接的单元格渲染器框架

1 个答案: