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

Question

我正在使用 'react-virtualized' 创建一个 table。在那个 table 中，一些数据可能看起来像 '<b>Brian Vaughn1</b>'。这个 table 单元格应该有 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

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

最好的方法是像我在示例 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
          }
        }
      />
    )
  })
}

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

Is there a clean way to conditionally style a cell / rowColumn in 'react-virtualized' table based on it's content?

react-virtualized