存储不会传递到连接的 cellrendererframework

Question

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

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

错误：

在“Connect(TestComponent)”的上下文中找不到“store”。要么将根组件包装在 a 中，要么将自定义 React 上下文提供程序传递给连接选项中的 Connect(TestComponent)，并将相应的 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 版本中解决。13？
https://github.com/ag-grid/ag-grid-react/issues/88

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

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

Answer 1

从文档和lilbumbleber 的回应中：

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);

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