Проблема с редактором ячеек ag-grid на основе компонента React, подключенного к Redux

Question

У меня проблема с пользовательским редактором ячеек ag-grid. Я хочу получить состояние от Redux, но если я использую функцию подключения из'act-redux ', она скрывает функцию isPopup , которая необходима для ag-grid. В результате мой редактор не виден за пределами ячейки редактирования.

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

Есть идеи, как создать подходящий компонент?

Answer 1

На самом деле ag-grid использует экземпляр компонентов класса для перехвата любых методов жизненного цикла, которые в вашем случае не могут получить экземпляр SelectEditor, поскольку он обернут в connect Ho C.

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 и для компонентов класса, но вы можете попробовать это тоже. Если это работает, вам не нужно преобразовывать класс в функциональный компонент.