react-virtualized - 是否有一种干净的方法可以根据内容在 'react-virtualized' 表中有条件地设置单元格/行列的样式？

Question

我正在使用“react-virtualized”来创建一个表。在该表中，一些数据可能显示为 '<b>Brian Vaughn1</b>'。 .此表格单元格应具有 font-weight: bold并且只应呈现文本，不带标签。像这样:

我已经设法通过使用 ReactDOM.findDOMNode 解决了这个问题(据我所知应该避免)，但我认为应该有更好、更清洁的方法来做到这一点。这是我的代码:

import React, { Component } from 'react';
import { Column, Table } from 'react-virtualized';

import './chart-table.scss';

class ChartRTable extends Component{
  constructor(props){
    super(props);
    this.handleScroll = this.handleScroll.bind(this);
  }


  getColumns(data){
   const columnsNumber = data.namesForColumns.length;
    const columnWidth = this.props.tableWidth / columnsNumber;
    let namesForColumns = ['name', 'description'];
    return namesForColumns.map( name => {
      return (
        <Column
          label={name}
          dataKey={name}
          width={columnWidth}
        />
      )
    })
  }


  handleScroll(){
    // not a very nice way to make use of <b> tags in data
    let dom = ReactDOM.findDOMNode(this);
    let all = dom.getElementsByClassName('ReactVirtualized__Table__rowColumn');
    let texts = [].slice.call(all).filter( (text) => text.innerHTML.indexOf('&lt;') > -1);
    texts.map( (el) => {
      let text = el.innerHTML;
      let newText = text.replace(/&lt;b&gt;/g, '').replace(/&lt;\/b&gt;/g, '');
      el.innerHTML = newText;
      el.style.fontWeight = 'bold';
    })
  }

  componentDidMount(){
    this.handleScroll();
  }

  render() {
    // dummy data 
    const list = [
      { name: 'Brian Vaughn', description: '<b>Software engineer1</b>' },
      { name: 'Brian Vaughn', description: 'Software engineer' },
      { name: '<b>Brian Vaughn1</b>', description: 'Software engineer' },
      { name: 'Brian Vaughn', description: 'Software engineer' },
      { name: 'Brian Vaughn', description: 'Software engineer' },
      { name: 'Brian Vaughn', description: 'Software engineer' },
      { name: '<b>Brian Vaughn</b>', description: '<b>Software engineer</b>' },
      { name: 'Brian Vaughn', description: 'Software engineer' },
      { name: 'Brian Vaughn', description: 'Software engineer' },
      { name: 'Brian Vaughn', description: 'Software engineer' },
      { name: 'Brian Vaughn', description: 'Software engineer' },
      { name: 'Brian Vaughn', description: 'Software engineer' },
    ];
    return(
      <Table
        onScroll={this.handleScroll}
        ref='table'
        width={this.props.tableWidth}
        height={this.props.tableHeight}
        headerHeight={35}
        rowHeight={37}
        rowCount={list.length}
        rowGetter={({ index }) => list[index] }
      >
        {this.getColumns(this.data)}
      </Table>
    )
  }
};

//TODO PropTypes

export default ChartRTable;

有什么想法吗？

Answer 1

有点奇怪，看到我自己的名字贴满了一个 StackOverflow 问题。 :)

最好的方法是像我在示例 here 中那样使用自定义 columnRenderer .因此，在上述情况下，您可以删除 handleScroll 并将 getColumns 替换为如下内容:

getColumns(data){
  const columnsNumber = data.namesForColumns.length;
  const columnWidth = this.props.tableWidth / columnsNumber;

  let namesForColumns = ['name', 'description'];

  return namesForColumns.map( name => {
    return (
      <Column
        label={name}
        dataKey={name}
        width={columnWidth}
        cellRenderer={
          ({ cellData, columnData, dataKey, rowData, rowIndex }) => {
            const shouldHighlight = cellData.indexOf('<b>') === 0
            const text = cellData.replace(/<\/*b>/g, '')

            return shouldHighlight
              ? <strong>{text}</strong>
              : text
          }
        }
      />
    )
  })
}