是否有一种干净的方法可以根据其内容有条件地设置“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示例中所做的那样。因此，在上述情况下，您可以删除并替换为如下内容：handleScrollgetColumns

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
          }
        }
      />
    )
  })
}