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

Question

当我 inherit/subclass 'Column' 组件时，它抛出 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;

它工作得很好，但是我怎样才能避免那个警告呢？

Answer 1

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

为什么你首先要继承它？ type="Column" 是做什么的？

Answer 2

我认为继承 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 请告诉我，我会考虑添加对它的支持。

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

Warning when react virtualized column is subclassed

react-virtualized