基于连接到 Redux 的 React 组件的 ag-grid 单元格编辑器的问题答案

【问题标题】：Problem with ag-grid cell editor based on React Component connected to Redux基于连接到 Redux 的 React 组件的 ag-grid 单元格编辑器的问题
【发布时间】：2020-06-21 14:48:33
【问题描述】：

我在使用自定义 ag-grid 单元格编辑器时遇到问题。我想从 Redux 获取状态，但如果我使用来自 'react-redux' 的连接函数，它会隐藏 ag-grid 所需的 isPopup 函数。结果我的编辑器在编辑单元格之外不可见。

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

任何想法如何创建合适的组件？

【问题讨论】：

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

标签： redux react-redux ag-grid ag-grid-react

【解决方案1】：

实际上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} />);

我不确定ag-grid 在类组件的情况下是否也使用 refs，但您也可以尝试一下。如果它有效，那么您不必将类转换为功能组件。

【讨论】：