警告作出反應虛擬列時，子類

當我繼承/子類「列」組件，它拋出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;

它工作得很好，但我怎樣才能避免從那個警告？

來源

2016-09-26 brsbilgic

我不認爲對子類別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，但讓我知道，我會考慮增加對它的支持。

來源

2016-09-26 19:01:09 brianvaughn

我按照你的建議添加了一個'CustomColumn'方法，並且很容易實現了一個合適的'headerRenderer'。謝謝！但是，現在我面臨另一個挑戰，即向列標題添加自定義按鈕以重置列排序。我可以在標題中添加一個按鈕，但我不確定如何正確處理'onClick'事件。例如，當單擊該內部按鈕時，我無法禁用「onHeaderClick」。理想情況下，我想添加一個像onColumnRemoveSortClicked一樣的新的道具，但不知道如何將這些道具傳遞給在列的'headerRenderer'中呈現的組件。 – brsbilgic

您可以直接將參數（例如'sort'回調）傳遞到'headerRenderer '所以我建議直接調用這個方法，而不是使用'onHeaderClick'。 – brianvaughn

恐怕您根本沒有繼承RV.Column，您仍在繼承React.Component，只是您的組件的名稱是Column。反應仍然會顯示錯誤，因爲您的自定義Column！== RVC.Column。

爲什麼你想在第一個地方繼承它？ type="Column"是做什麼的？

來源

2016-09-26 18:49:10

警告作出反應虛擬列時，子類

回答

相關問題