基于连接到Redux的React组件的ag网格单元编辑器存在问题

我对自定义ag网格单元编辑器有问题。我想从Redux获取状态，但如果我使用“react Redux”的connect函数，它会隐藏ag网格所需的ispoup函数。结果我的编辑器在编辑单元外不可见

class SelectEditor extends React.Component {
  getValue = () => '123'
  isPopup = () => true

  render() {
    const unselected = { border: '1px solid transparent', padding: 4 };
    const selected = { border: '1px solid lightgreen', padding: 4 };

    const happyStyle = this.props.happy ? selected : unselected;
    const sadStyle = !this.props.happy ? selected : unselected;
    return (
      <div ref='container'>
        <img src='https://www.ag-grid.com/images/smiley.png' style={happyStyle} />
        <img src='https://www.ag-grid.com/images/smiley-sad.png' style={sadStyle} />
      </div>
    );
  }
}
const mapStateToProps = state => ({ happy: state.clientsData });
const mapDispatchToProps = dispatch => ({});

// 1) popup works - I see component
export default SelectEditor;
// 2) popup doesn't work
export default connect(mapStateToProps, mapDispatchToProps)(SelectEditor);

class SelectEditor扩展了React.Component{
getValue=（）=>“123”
isPopup=（）=>true
render（）{
const unselected={border:'1px solid transparent'，padding:4}；
所选常量={边框：“1px实心浅绿色”，填充：4}；
const happyStyle=this.props.happy？选中：未选中；
const sadStyle=！this.props.happy？选中：未选中；
返回(
);
}
}
const-mapStateToProps=state=>（{happy:state.clientsData}）；
常量mapDispatchToProps=dispatch=>（{}）；
//1）弹出窗口工作-我看到组件
导出默认选择器编辑器；
//2）弹出窗口不起作用
导出默认连接（MapStateTrops、mapDispatchToProps）（选择编辑器）；

---

有没有关于如何创建合适组件的想法？

实际上

ag-grid

使用类组件的实例来钩住任何生命周期方法，在您的情况下，它无法获得

SelectEditor

的实例，因为它是用

connect

HoC包装的

const SelectEditor = (props) => {
  const getValue = () => '123'
  const isPopup = () => true
  React.useImperativeHandle(props.innerRef, () => ({ getValue, isPopup }))

  const unselected = { border: '1px solid transparent', padding: 4 };
  const selected = { border: '1px solid lightgreen', padding: 4 };
  const happyStyle = this.props.happy ? selected : unselected;
  const sadStyle = !this.props.happy ? selected : unselected;

  return (
    <div ref='container'>
      <img src='https://www.ag-grid.com/images/smiley.png' style={happyStyle} />
      <img src='https://www.ag-grid.com/images/smiley-sad.png' style={sadStyle} />
    </div>
  );
}
const mapStateToProps = state => ({ happy: state.clientsData });
const mapDispatchToProps = dispatch => ({});

const ConnectedSelect = connect(mapStateToProps, mapDispatchToProps)(SelectEditor)

export default React.forwardRef((props, ref) => <ConnectedSelect innerRef={ref} {...props} />);

const SelectEditor=（道具）=>{
常量getValue=（）=>“123”
常量isPopup=（）=>true
React.useImperialiveHandle（props.innerRef，（）=>（{getValue，isPopup}））
const unselected={border:'1px solid transparent'，padding:4}；
所选常量={边框：“1px实心浅绿色”，填充：4}；
const happyStyle=this.props.happy？选中：未选中；
const sadStyle=！this.props.happy？选中：未选中；
返回(
);
}
const-mapStateToProps=state=>（{happy:state.clientsData}）；
常量mapDispatchToProps=dispatch=>（{}）；
const ConnectedSelect=connect（mapStateToProps、mapDispatchToProps）（SelectEditor）
导出默认的React.forwardRef（（props，ref）=>）；

---

我不确定在类组件的情况下，

ag grid

是否也使用refs，但您也可以尝试一下。如果它能工作，那么您就不必将类转换为功能组件。

您能解决这个问题吗？一个月以来一直面临同样的问题。任何帮助都将不胜感激！