反应虚拟化列被子类化时发出警告答案

【问题标题】：Warning when react virtualized column is subclassed反应虚拟化列被子类化时发出警告
【发布时间】：2023-04-01 07:09:01
【问题描述】：

当我继承/子类化“列”组件时，它会抛出 Warning: Failed prop type: Table only accepts children of type Column

这就是我对Column进行子类化的方式

import React, {Component, PropTypes} from 'react';
import * as RV from 'react-virtualized';

class Column extends Component {
    constructor() {
        super();
    }

    render() {
        return (
            <RVC.Column {...this.props} type="Column" />
        )
    }
}

Column.defaultProps = RV.Column.defaultProps;
Column.propTypes = RV.Column.propTypes;

export default Column;

效果很好，但如何避免该警告？

【问题讨论】：

标签： react-virtualized

【解决方案1】：

我认为子类化Column 没有任何好处。我假设你的真正意图是设置默认值或干掉你的项目，在这种情况下，我建议只对这样的列使用工厂函数：

import { Column, Table } from 'react-virtualized'

export default function CustomColumn (columnProps) {
  const customProps = {
    // Set any default props here ...
  }

  return (
    <Column
      {...customProps}
      {...columnProps}          
    />
  )
}

function ExampleTable (tableProps) {
  return (
    <Table {...tableProps}>
      {CustomColumn({
        dataKey: 'foo',
        width: 100
      })}
      {CustomColumn({
        dataKey: 'bar',
        width: 100
      })}
    </Table>
  )
}

不管怎样，我已经在生产项目中完成了这项工作，而且效果很好。如果您认为您有一个强大的子类化 Column 用例，请告诉我，我会考虑添加对它的支持。

【讨论】：

我按照您的建议添加了一个CustomColumn 方法并轻松实现了一个正确的headerRenderer。谢谢！但是，我现在面临的另一个挑战是向列标题添加自定义按钮以重置列排序。我可以在标题中添加一个按钮，但我不确定如何正确处理 onClick 事件。例如，当单击该内部按钮时，我无法禁用 onHeaderClick。理想情况下，我想像 onColumnRemoveSortClicked 这样的表中添加一个新的道具，但不确定如何将此道具传递给列的headerRenderer 中呈现的组件
您可以直接将参数（例如sort 回调）传递给您的headerRenderer，所以我建议让它直接调用该方法而不是使用onHeaderClick。

【解决方案2】：

恐怕你根本没有继承RV.Column，你仍然继承了React.Component，只是你的组件名称是Column。 React 仍然会显示错误，因为你自定义的Column !== RVC.Column。

你为什么首先要对它进行子类化？ type="Column" 是做什么的？

【讨论】：