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

Posted 2023-03-28

【中文标题】商店没有被传递给连接的 cellrendererframework

【英文标题】：Store not getting passed down to connected cellrendererframework

【发布时间】：2019-07-16 04:32:18

【问题描述】：

我正在使用以下组件： 反应 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。

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

【参考方案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);

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

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

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

【讨论】：

是的，也试过了，但没有运气。我们需要为此做任何额外的导入/安装吗？还尝试将 React 版本升级到 16.8，因为他们说计划在 2019 年 1 月中旬发布，但问题仍然存在。

这个功能是available from 20.x。您将需要按看起来的那样提升版本。

好的，谢谢您将 ag-grid-react 升级到 20.x 似乎可以解决问题。我运行了以下命令： npm install ag-grid-community@latest ag-grid@latest ag-grid-react@latest --save 它安装了以下版本：“ag-grid”：“^18.1.2”，“ag -grid-community": "^19.1.4", "ag-grid-react": "^20.0.0",

ag-grid-community 似乎是 ag-grid-react ver.20.x 的依赖项，但它给出了社区需要为 20.x 的警告。不知道为什么它只安装 19.x 但就目前而言，升级以及您之前的建议似乎可以解决问题

你救了我的命！