React ag-grid（无限行模型）的标题复选框选择答案

【问题标题】：Header checkbox selection for React ag-grid (infinite row model)React ag-grid（无限行模型）的标题复选框选择
【发布时间】：2020-09-23 06:45:52
【问题描述】：

由于无限行模型不支持参数headerCheckboxSelection=true，我需要创建自己的复选框。所以问题是，如何在第一列标题中添加一个具有必要 api 功能的复选框？
使用自定义标题会重置所有标题的所有过滤、排序、样式和菜单选项，是否可以只为第一个标题执行此操作？
我试过设置第一列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>
    );
  }
}

编辑：

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

【问题讨论】：

标签： reactjs ag-grid

【解决方案1】：

找到了解决办法！

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

总结一下：

正常创建自定义标题组件（记得添加文字）
要设置您想要交换的列标题，您可以使用colDef[index].headerComponentFramework = myNewCustomComponent 或通过标题名称或ID 等获取它。这取决于您。
params 对象（带有 api 函数）会自动应用到那里，只记得在构造函数中添加 super(props)

【讨论】：