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 问题。:)

最好的方法是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
          }
        }
      />
    )
  })
}