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

Question

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

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

错误：

在“Connect(TestComponent)”的上下文中找不到“store”。要么将根组件包装在 a 中，要么传递一个自定义 React 上下文提供者和相应的 React 上下文 消费者在连接选项中连接（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 引入了门户，这些是动态创建 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);

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

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

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