Header 复选框选择用于 React ag-grid（无限行模型）

Question

由于无限行 model 不支持参数headerCheckboxSelection=true ，我需要创建自己的复选框。 所以问题是，如何在第一列 header 中添加一个具有必要 api 功能的复选框？
使用自定义 header 会重置所有标题的所有过滤、排序、样式和菜单选项，是否可以只为第一个做呢？
我尝试设置第一列 def columnDef.headerComponentFramework = CustomCheckbox或columnDef.headerComponent = CustomCheckbox ，或者将它们用作字符串，但我得到的只是这个错误：

Warning: React.createElement: type is invalid -- expected a string (for built-in components or a class/function (for composite components) but got: undefined.

这是我的复选框组件：

export default class customCheckbox extends Component {
  constructor(props) {
    super(props);
    console.log(props)
    this.state = {
      checked: false,
    };
  }

  updateState = e => {
    this.setState({ checked: e.value });
    if (!this.state.checked) this.selectAllRows(true);
    if (this.state.checked) this.selectAllRows(false);
  };

  selectAllRows = bool => {
    this.props.api.forEachNode(row => {
      this.props.api.getRowNode(row.id).selectThisNode(bool);
    });
  };
  render() {

    return (
      <div className="custom-header-checkbox">
        <CheckBox value={this.state.checked} onChange={this.updateState} />
      </div>
    );
  }
}

编辑：

我得到了复选框来显示将复选框组件更改为 function 并使用此headerComponentFramework = CustomCheckboxFunction ，但我无法将 api 传递给它

Answer 1

找到了解决方案！

Ag-grid 显然希望您在自定义组件中拥有一些 String 值，然后才能使用它。 所以我所做的就是在我的复选框中添加一些文本，一切都很好。

总结一下：

1. 正常创建您的自定义 header 组件（记得添加文本）
2. 要设置要与自己交换的列 header，可以使用colDef[index].headerComponentFramework = myNewCustomComponent或通过 header 名称或 ID 等获取它。这取决于您。
3. 参数 object （带有 api 函数）会自动应用到那里，只需记住在构造函数中使用 super(props)