reactjs - ReactDataGrid - 当其单元格值作为DOM而不是字符串传递时，过滤器不适用于特定列

Question

我在表中使用带有过滤器选项的 React-data-grid。对于某些列单元格，我正在传递一个 DOM 对象（而不是作为字符串）。对于本专栏，过滤器功能不起作用。

       this._columns = [
        {
            key: 'date',
            name: 'Shipment date',
            width: 220,
            sortable: true,
            filterable: true,
        },{
            key: 'price',
            name: 'Shipment Price',
            width: 220,
            sortable: true,
            filterable: true,
        }];

这里是行...

    let rows = [];
    _.each(response, function(value, index){
    rows.push({
            date: value.date
            price: <div>{value.currencySymbol} <span>{value.price}</span></div>
           })
    });

所以，这是我的 Column Metadata 和 Rows。我将此元数据传递给 ReactDataGrid 组件。 现在 date 过滤器工作正常。但是price，由于此内联 DOM 元素，此过滤器无法正常工作。

有人可以帮我解决这个问题吗？

Answer 1

通过使用''解决了这个问题，formatter否则我们可以使用' getRowMetaData'

formatter：用于渲染 DOM 中的值的适配器/中间件 getRowMetaData：用于获取行的相邻单元格值。而且，我们可以使用 props.dependentValues 来实现，它将包含行的所有列数据。我在“Shipment Price”列中使用了它来获取该行的其他列值。

this._columns = [
        {
            key: 'date',
            name: 'Shipment date',
            width: 220,
            sortable: true,
            filterable: true,
            formatter: (props)=>(<div style={{border: '0px'}}>{props.value}</div>),
        },{
            key: 'price',
            name: 'Shipment Price',
            width: 220,
            sortable: true,
            filterable: true,
            formatter: (props) => (this.getTrackingUrl(props.dependentValues.rawObj, props.dependentValues.indexVal)),
            getRowMetaData: (row) => (row)
        }];